手动控制vue路由离开后是否清除keep-alive缓存

如果使用 this.$destroy()会造成相应组件页面之后也不能keepAlive缓存,于是找到下面的方法。另外把监控路由离开事件的this.$destroy()写在Vue.mixin里,或者写在单独作为mixin引用的.vue文件里可以方便做统一配置。
下面的this.$store.state.app.ifDestorythis.$store.commit('SET_COMPAGE_DESTORY', false)是项目需求里的具体判断条件,可根据实际情况调整成其他条件。
参考链接:
https://juejin.im/post/5b610da4e51d45195c07720d

  beforeRouteLeave(to, from, next){
    if (this.$store.state.app.ifDestory && this.$vnode && this.$vnode.data.keepAlive) {
      if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {
        if (this.$vnode.componentOptions) {
          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];
            this.$store.commit('SET_COMPAGE_DESTORY', false)
          }
        }
      }
    }
    next();
  }

你可能感兴趣的:(手动控制vue路由离开后是否清除keep-alive缓存)