vue keepalive 返回清空

vue官网的描述：

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

很多实用keep-alive的小伙伴都会遇到一个问题，离开页面后再次进入页面的时候，页面并没有刷新，也不出处发请求，其实keep-alive会将当前页面的虚拟dom存起来，再次进入的时候就会直接渲染不会再从新加载，在这里提供连个解决方法吧

1 使用官网提供的生命周期 activated 和 deactivated 去处理

//把所有放在created里面处理的方法都放在activated里面去处发

activated(){
    //需要初始化调用的方法
    this.init();

  },

  created() {  

  },

2 监听浏览器返回事件，清空虚拟dom，下次进入会从新加载

首先在页面离开的时候获取到当前页面的虚拟dom

//离开页面的时候记录当前页面的虚拟dom
 beforeRouteLeave(to, from, next) {
    this.saveVnode(this, this.$vnode)
    next()
  },
 created() {  
    //在created监听浏览器返回事件
    window.addEventListener('popstate', e => {
      this.deleteKeepAlive(this, '/studyRecord', this.keepALiveData)
    })
  },

methods(){
  // 获取虚拟dom ，拿到keepalive的缓存
   saveVnode = (that, vnode) => {
    var key = vnode.key == null ? vnode.componentOptions.Ctor.cid + (vnode.componentOptions.tag ? `::${vnode.componentOptions.tag}` : "") :
        vnode.key;
      that.keepALiveData = {
        cache: vnode.parent.componentInstance.cache,
        keys: vnode.parent.componentInstance.keys,//获取所有keepalive key
        key: key,//获取当前页面 key
      }
  }
//methods方法  根据获取到的key删除对应的虚拟dom
   deleteKeepAlive = (that, path, keepALiveData) => {
        let cache = keepALiveData.cache
        let keys = keepALiveData.keys
        let key = keepALiveData.key
        var index = keys.indexOf(key);

        if (cache[key]) {
            if (keys.length) {
                var index = keys.indexOf(key);
                if (index > -1) {
                    keys.splice(index, 1);
                }
            }
            delete cache[key];
        }
  }
}

//清空全局的keep-alive的虚拟dom
const deleteOverallKeepAlive = (that) => {
    that.$vnode.parent.componentInstance.cache = {};
    that.$vnode.parent.componentInstance.keys = [];
}