keep-alive 同一个组件不缓存问题

参考链接： 完美解决vue3 keep-alive多个路由使用同一个组件的缓存问题
由于此方法 vue2 没有生效，探索其他办法

问题描述

发现左侧菜单打开的路径和组件不同时
即如下配置的 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 配置对比进行的缓存的操作。

此文章仅供学习，为个人原创，如需转载请标明作者。