通过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去实现缓存可控了

 

上一篇:es - elasticsearch自定义分析器 - 内建分词过滤器 - 5


下一篇:keep-alive的作用