vue keep-alive动态清除缓存

弄了将近一小天终于可以了。。。。以此记录

场景描述：有 A>B>C 三个层级的页面 ，A>B B刷新页面，B>C C刷新页面， C>B B不刷新页面，走缓存

原来是这么做的：

路由定义

const routes =[
    {
        name:'a'
        path:'/A',
        component:()=>import('@/pages/A'),
        meta:{
            title:'A页面'
        }
    },
     {
        name:'b',
        path:'/B',
        component:()=>import('@/pages/B'),
        meta:{
            title:'B页面',
            keepAlive:true //主角是 B 页面，这句要加上
        }
    },
     {
        name:'c', //判断跳转时使用，需要加
        path:'/C',
        component:()=>import('@/pages/C'),
        meta:{
            title:'C页面'
        }
    }
]

添加钩子函数：

  //A>B>C  A>B刷新 C>B不刷新
  beforeRouteLeave(to, from, next) {
    if (to.name === 'c') {
      from.meta.keepAlive = true;
    } else {
      from.meta.keepAlive = false;
    }
    next();//不可缺少
  },

结果：第一次 A1>B1 B1刷新  B1>C1 C1刷新正常  C1>B1 B1不刷新  用缓存   第一次全部正确

但是但第二次走的时候A2>B2  B2刷新  正常 B2>C2 C2刷新也正常  但当C2返回B2时  竟然变成了B1 B2并没有缓存 

B页面只缓存了B1 B2没有缓存上  

修改代码：

beforeRouteLeave(to,from,next){
      if(to.name ==='c'){
          from.meta.keepAlive=true;
          
      }else if(to.name ==='a'){
          //动态清楚缓存
          var key = this.$vnode.key == null
              ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
              : this.$vnode.key;
          var cache = this.$vnode.parent.componentInstance.cache;
          var keys  = this.$vnode.parent.componentInstance.keys;
          if (cache[key])
          {
              if (keys.length) {
                  var index = keys.indexOf(key);
                  if (index > -1) {
                      keys.splice(index, 1);
                  }
              }
              delete cache[key];
          }
      }

      next()
  },

 完美解决   仅作个人参考    

本文参考：https://juejin.im/post/5b610da4e51d45195c07720d       十分感谢！！！