通過key決定是否刷新keep-alive組件的方法

有時候不一定需要exclude去控制哪些組件要被排除在緩存外面的，有些可能是根據實際情況決定是否控制緩存，這時候網上有

 

<keep-alive v-if='$route.meta.keepAlive">

<router-view ></router-view>

</keep-alive>

 

就是通過路由配置meta去實現的，但是本人測試了一下以后發現其實是不可以做到的，這時候可以換個思路，使用key 刷新router-view去實現控件刷新，大概代碼如下:

HTML：

 <keep-alive>
            <router-view :key="checkKeepAlive()"></router-view>
          </keep-alive>

JS：

checkKeepAlive() {
      if (!this.$route.meta.keepAlive) {
        console.log('輸出',this.$route.name)
        return this.$route.name+Math.random();
      }
    }

router：（我這里是自路由控制）

 children: [
      {
        path: "/home/test1",
        name: "test1",
        meta: {
          keepAlive: true
        },
        component: () => import("@/components/Test1.vue")
      },
      {
        path: "/home/test2",
        name: "test2",
        meta: {
          keepAlive: false
        },
        component: () => import("@/components/Test2.vue")
      }
    ]

然后你就可以寫JS去控制keepalive的true/false去實現緩存可控了