本文围绕 Vue Router 中路由组件复用问题开展

场景复现

我的项目中常常会遇到增改查的需要，通常采纳不同的路由指向同一个页面组件，以此达到复用页面的性能，然而复用页面存在一些状态问题。

以下状况均不缓存页面：

分两种状况，均为动静路由匹配

  • (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 对象
  2. 应用 2.2 中引入的 beforeRouteUpdate 导航守卫

应用beforeRouteUpdate的时候，如果路由外面通过布尔模式：props: true 将组件和路由解耦，这个时候会呈现props获取谬误的状况，比方说从/foo/1页面切换到/foo/2页面的时候，在beforeRouteUpdate获取到的还是失活页面组件的id

在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等等

继续更文，关注我，你会发现一个虚浮致力的宝藏前端，让咱们一起学习，独特成长吧。

喜爱的小伙伴记得点赞关注珍藏哟，回看不迷路

欢送大家评论交换, 蟹蟹