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

// 路由配置
{  // 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
}

// 打印如下
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' ]

// 处理后 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)