解决keep-alive同一个组件不缓存问题
作者：_jeneen
这篇文章给大家介绍了如何解决keep-alive同一个组件不缓存问题,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
问题描述
发现左侧菜单打开的路径和组件不同时
即如下配置的 User.vue, Login.vue 这两个页面时，keep-alive会生效，但是 切换到 /app/1/false就不会进行缓存。
在各组件中的生命周期加上打印信息，包括 activated, deactivated。
// 路由配置
{ // tab3
path: '/user',
name: 'User',
component: () => import('../User.vue'),
},
{
path: '/',
name: 'Login',
component: () => import('../Login.vue'),
},
{ // tab1, tab2
path: '/app/:id/:single',
name: 'App', // 实际每个菜单的 name 和 path 一样
component: () => import('../App.vue'),
},
// 绿色框组件中
<transition name="fade-transform" mode="out-in">
<el-main>
<keep-alive :include="cachedTags">
<router-view :key="key" />
</keep-alive>
</el-main>
</transition>
get cachedTags() {
return TagsViewModule.cachedTags 即 // 菜单的 name 的组合
}
get key() {
return this.$route.path
}
| 菜单 | name | path |
|---|---|---|
| tab1 | /app/1/false | /app/1/false |
| tab2 | /app/2/false | /app/2/false |
| tab3 | /user | /user |
| 操作：点击顺序 | ||
| 1->2->3->2->3 |
// 打印如下 created in App.vue mounted in App.vue id: 2 // 切换 tab2 时，数据发生变化 created in User.vue // 切换 tab3 mounted in User.vue activated in User.vue created in App.vue // 切换 tab2 deactivated in User.vue mounted in App.vue activated in User.vue // 切换 tab3 // cachedTags : [ '/user', '/app/1/false', '/app/2/true' ]
tab3第一次进入时会触发 created, 之后每次切换都是走 activated钩子，其缓存了搜索输入；
在 tab1->tab2时只根据路由中的 id信息进行了响应式变化操作，tab3 -> tab2时，又重新渲染了 App.vue组件
解决方案
针对 带 附带信息的路由的 name进行统一处理。
// 处理后 cachedTags : [ 'User', 'App' ]
const viewName = this.$route.name
if (view.name.startsWith('app/')) {
viewName = 'App' // 注意要与 App.vue 组件里的 name 一致
}
// 缓存依据于 router name
if (viewName === null) return
if (this.cachedTags.includes(viewName)) return
this.cachedTags.push(viewName)
问题分析/总结
看到这个解决办法，应该考虑就是 keep-alive对 includes中的哪些才能生效的问题？
找到 keep-alive源码查看( .\node_modules\vue\src\core\components\keep-alive.js)
即要 includes内的数据和组件的 name配置对比进行的缓存的操作。
到此这篇关于解决keep-alive同一个组件不缓存问题的文章就介绍到这了,更多相关keep-alive同一个组件不缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！