vue keep-alive缓存组件问题

export default [
  {
    path: '/',
    component: () =>
      import(
        /* webpackChunkName: "mainContainer" */ '@/views/mainContainer/index.vue'
      ),
    children: [
      {
        path: 'list',
        meta: {
          keepAlive: true,
        },
        component: () =>
          import(
            /* webpackChunkName: "resource" */ '@/views/index.vue'
          ),
      },
    ],
  },
]

2.在App.vue中添加相关代码

<div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>

3.在缓存的组件中使用activated生命周期钩子函数，当组件在 keep-alive 内被切换时activated被激活，简单来讲就是在什么情况下需要请求数据，什么时候直接使用缓存的数据

activated() {
    console.log('没错我在缓存组件中')
  },

c页面点击返回按钮，返回到B
 this.$router.push({path:'b?type=needToKeep'})  /* needToKeep是需要使用缓存的标识*/
 
 A页面到B页面，
 this.$router.push({path:'b'})
 
 B页面中：
 activated() {
    const { type } = this.$route.query
    console.log('没错我在缓存组件中')
    if(type !=='needToKeep'){
      this.initdata() // 需要重新请求数据
    }else{
     // 直接使用缓存的组件，假如说此时想刷新页面，重新请求数据怎么办呢，安排！
     const { type } = window.performance.navigation  // 1：刷新页面，0:返回页面
     type === 1 ? this.initdata() : '' 
    }
 },