您现在的位置是:首页 > Javascript
当前栏目
Vue-Router多级路由时,父组件重复加载的问题。
2023-03-07 09:43:26 时间
复现
代码中使用了两层路由,并且每层路由都使用了keep-alive,App.vue内初始代码如下:
<router-view v-slot="{Component}">
<keep-alive>
<component :is="Component" :key="$route.name"/>
</keep-alive>
</router-view>
然后下级路由View.vue有三个子路由,View.vue代码同上。
一、问题描述
实际使用过程中发现分别加载view的三个子路由时,View.vue会初始化三次。然后就开始考虑问题出现原因存在的可能性。
- Vue-Router Bug?显然不是。
- keep-alive的缓存失效?除了这三次初始化,往后都正常,说明是重复加载 了三次。
- 确定是重复加载了,开始排查代码
keep-alive让组件被切换之后,组件不被销毁,同时component的key值保证组件的复用,而代码中的key使用的是路由名称,子路由的路由名称都是不相同的,也就导致了组件无法被正常复用。
二、解决办法
给父路由、子路由添加相同的元信息标识,作为key值,参考如下:
<router-view v-slot="{Component}">
<keep-alive>
<component :is="Component" :key="$route.meta.id"/>
</keep-alive>
</router-view>
再次测试,一切Ok。
相关文章
- 鲜为人知但很有用的 HTML 属性
- 翻转再翻转!有意思的水平横向溢出滚动
- 自定义计数器小技巧!CSS 实现长按点赞累加动画
- 过五关!React高频面试题指南
- 软件开发中的十个认知偏差
- 不需要 JS!仅用 CSS 也能达到监听页面滚动的效果!
- 一文读懂TypeScript类型兼容性
- Vue 的响应式原则与双向数据绑定
- 快速掌握 TypeScript 新语法:Infer Extends
- JWT教你如何证明你是我的人!
- 一篇带给你 V8 GC 的实现
- 面试官:请使用JS完成一个LRU缓存?
- 通过可视化来学习JavaScript事件循环
- 新的跨域策略:使用 COOP、COEP 为浏览器创建更安全的环境
- 为什么有人说 vite 快,有人却说 vite 慢?
- 种草 Vue3 中几个好玩的插件和配置
- 超全面的前端工程化配置指南
- Vue 状态管理未来样子
- Volatile关键字能保证原子性么?
- 面试突击:SpringBoot 有几种读取配置文件的方法?