多路由复用页面组件问题

简介: 多路由复用页面组件问题

场景复现


项目中经常会遇到增改查的需求,通常采用不同的路由指向同一个页面组件,以此到达复用页面的功能,但是复用页面存在一些状态问题。


以下情况均不缓存页面:


分两种情况,均为动态路由匹配


  • (1) 路由a: /detail/1, 路由b: /detail/2 。   路由表里匹配/detail/:id
  • (2) 路由A: /new-detail/1, 路由B: /edit-detail/1 。 路由表里匹配/new-detail/:id, 和  /edit-detail/:id


这四个不同的url,注册的是同一个页面组件


在场景(1)中,切换页面,只调用beforeRouteUpdate钩子函数,不调用beforeRouteEnter、mounted等,可以监听到$route,并获取到激活组件里面的数据,不会错乱


在场景(2)中,切换页面,调用beforeRouteEnter钩子函数,不调用created、mounted等生命周期钩子


beforeRouteUpdate重用的组件官方解释(指的是动态路由匹配)


在当前路由改变,但是该组件被复用时调用,举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1/foo/2 之间跳转的时候


动态路由匹配


文档请看这里


响应路由参数的变化


当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。


复用组件时,想对路由参数的变化作出响应的话,有两种方法


  1. watch (监测变化) $route 对象


  1. 使用 2.2 中引入的 beforeRouteUpdate 导航守卫


使用beforeRouteUpdate的时候,如果路由里面通布尔模式props: true将组件和路由解耦,这个时候会出现props获取错误的情况,比方说从/foo/1页面切换到/foo/2页面的时候,在beforeRouteUpdate获取到的还是失活页面组件的id

image.png

beforeRouteUpdate钩子中,在next回调函数中编写代码并没有执行,仿佛没有调用,但是去掉next(),路由就不会放行,有点奇怪。需要阅读源码实现逻辑...


完整的导航解析流程


  1. 导航被触发
  2. beforeRouteLeave(失活组件里调用) 可以访问组件实例 this
  3. beforeEach(全局前置钩子)
  4. beforeRouteUpdate(如果是重用组件,则调用) 可以访问组件实例 this
  5. beforeEnter(路由配置里,路由独享的)
  6. 解析异步路由组件(如果有)
  7. beforeRouteEnter(被激活组件里调用)
  8. beforeResolve(全局解析守卫)
  9. 导航被确认
  10. afterEach(全局后置钩子)
  11. 触发 DOM 更新。
  12. beforeRouteEnter (调用守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。next(vm) => {})


接着调用created、mounted等等

目录
相关文章
|
4天前
|
设计模式 JavaScript 开发者
深度解析Vue中的插槽机制:打开组件设计的无限可能
深度解析Vue中的插槽机制:打开组件设计的无限可能
21 1
|
11月前
|
JavaScript 前端开发 API
无界微前端是如何渲染子应用的?(下)
无界微前端是如何渲染子应用的?(下)
455 0
|
3天前
|
JavaScript 前端开发 开发者
Vue的事件处理机制提供了灵活且强大的方式来响应用户的操作和组件间的通信
【5月更文挑战第16天】Vue事件处理包括v-on(@)指令用于绑定事件监听器,如示例中的按钮点击事件。事件修饰符如.stop和.prevent简化逻辑,如阻止表单默认提交。自定义事件允许组件间通信,子组件通过$emit触发事件,父组件用v-on监听并响应。理解这些机制有助于掌握Vue应用的事件控制。
16 4
|
4天前
|
存储 前端开发 JavaScript
多个页面之间如何进行数据传递
多个页面之间如何进行数据传递
86 0
|
5月前
|
开发框架 小程序 JavaScript
小程序框架->框架,视图层,生命周期(逻辑层)
小程序框架->框架,视图层,生命周期(逻辑层)
30 0
|
6月前
|
存储 API UED
uniapp跨页面传递数据的几种方式
uniapp跨页面传递数据的几种方式
308 0
|
10月前
|
前端开发 JavaScript
怎样实现路由封装
怎样实现路由封装
|
11月前
|
存储 前端开发 JavaScript
无界微前端是如何渲染子应用的?(上)
无界微前端是如何渲染子应用的?(上)
572 0
|
存储 设计模式 JSON
React组件封装和逻辑复用新解
a. 组件封装 • RenderProps增强版 • Web Component • 配置化(LCD) b. 逻辑复用 • 中间件(MiddleWare) • Redux Thunk • 监听history • stateComponment
220 0
|
Java fastjson Maven
Android组件化开发(二)--网络请求组件封装
前面一篇文章我们讲解了`maven私服`的搭建,maven私服在`组件化框架`中有一个很重要的地位就是可以将我们的`lib`库放到局域网中,供公司其他开发者使用,实现类库的分享。 下面是这个系列准备实现的一个`组件化实战项目框架`: