有时候不一定需要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去实现缓存可控了