共计 1338 个字符，预计需要花费 4 分钟才能阅读完成。
本文围绕
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，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创立，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变动作出响应的话，有两种办法
- watch (监测变动) $route 对象
- 应用 2.2 中引入的 beforeRouteUpdate 导航守卫
应用 beforeRouteUpdate 的时候，如果路由外面通过布尔模式：props: true 将组件和路由解耦 ，这个时候会呈现props 获取谬误的状况，比方说从 /foo/1 页面切换到 /foo/2 页面的时候，在 beforeRouteUpdate 获取到的还是失活页面组件的 id
在
beforeRouteUpdate钩子中，在next回调函数中编写代码并没有执行，好像没有调用，然而去掉next()，路由就不会放行，有点奇怪。须要浏览源码实现逻辑 …
残缺的导航解析流程
- 导航被触发
- beforeRouteLeave（失活组件里调用）能够拜访组件实例
this - beforeEach（全局前置钩子）
- beforeRouteUpdate（如果是重用组件，则调用）能够拜访组件实例
this - beforeEnter（路由配置里，路由独享的）
- 解析异步路由组件（如果有）
- beforeRouteEnter（被激活组件里调用）
- beforeResolve（全局解析守卫）
- 导航被确认
- afterEach（全局后置钩子）
- 触发 DOM 更新。
- beforeRouteEnter（调用守卫中传给 next 的回调函数，创立好的组件实例会作为回调函数的参数传入。next(vm) => {}）
接着调用 created、mounted 等等
🌹 继续更文，关注我，你会发现一个虚浮致力的宝藏前端😊，让咱们一起学习，独特成长吧。
🎉 喜爱的小伙伴记得点赞关注珍藏哟，回看不迷路 😉
🎁 欢送大家评论交换, 蟹蟹😊
