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 )

name 与 val 进行匹配
pruneCache 函数
cache 构建
匹配函数

即要 includes 内的数据和组件的 name 配置对比进行的缓存的操作。

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