vue如何动态清空路由缓存，结合keep-alive标签、el-tag标签

背景：默认进行路由缓存，关闭el-tag标签后，清空该标签对应的路由的缓存，下次打开时，也是默认缓存。

keep-alive是不支持动态删除缓存，所以我们需要通过一些特殊的方法，来实现动态删除路由缓存，top：即看一下this.$vnode的返回值，那些是我们需要的。

以下代码写在src文件的index.js里面，看以下你们import Vue from 'vue’写在哪，就写在哪。

//当前路由跳转到下一个路由前，进行拦截
Vue.mixin({
  beforeRouteLeave(to,form,next){
    //获取当前路由所属的.vue文件的name名
    let vueName = this.$vnode.componentOptions.Ctor.extendOptions.name;
    //判断该name名是否存在清空路由缓存的临时缓存中
    if(vueName == sessionStorage.getItem("routerIsClose")){
      //获取当前路由的key值
      let key = this.$vnode.componentOptions.Ctor.cid;
      //获取所有路由的key值
      let keys = this.$vnode.parent.componentInstance.keys;
      if(null != key && undefined != key){
        //将需要清空路由缓存的key移除
        keys.splice(keys.indexOf(key),1);
        //获取该key值对应的缓存
        let cache = this.$vnode.parent.componentInstance.cache;
        //删除该缓存
        delete cache[key];
        this.$destroy();
        //移除临时缓存
        sessionStorage.removeItem("routerIsClose");
      }
    }
    next();
  }
});

不明白的，可以留言
觉得有帮助的小伙伴，请帮忙点个赞，蟹蟹