ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

多路由复用页面组件问题

2022-08-27 22:32:27  阅读:141  来源: 互联网

标签:调用 复用 beforeRouteUpdate 组件 路由 页面


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


标签:调用,复用,beforeRouteUpdate,组件,路由,页面
来源: https://www.cnblogs.com/all-smile/p/16631658.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有