乐趣区

关于前端:多路由复用页面组件问题

jiezi

本文围绕 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 等等

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

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

🎁 欢送大家评论交换, 蟹蟹😊

退出移动版