解决jeecgboot在点击关闭tab页签时,清除keep-alive的缓存

借助Vuex维护一个全局的状态,在beforeRouteLeave路由钩子中,清除缓存,方法如下,借用大神的源码

参考:Vue 全站缓存之 keep-alive : 动态移除缓存
实现过程:
  1. store/moudles/app.js 中维护 closePage
	state: {
		closePage: {}
	}
  1. TabLayout.vue 中的remove方法触发状态改变
 this.$store.dispatch('setClosePage', {[key]: true})
  1. main.js Vue全局混入
//使用Vue.mixin的方法拦截了路由离开事件,并在该拦截方法中实现了销毁页面缓存的功能。
Vue.mixin({
  beforeRouteLeave:function(to, from, next){
    let key1 = this.$route.fullPath;
    if(this.$store.state.app.closePage[key1]){
      from.meta.keepAlive = false;
    }
    if (!from.meta.keepAlive)
    {//此处判断是如果返回上一层,你可以根据自己的业务更改此处的判断逻辑,酌情决定是否摧毁本层缓存。
      if (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.$destroy();
    }
    next();
  }
});
  1. 在需要使用缓存的页面开启缓存,同时再created钩子中添加默认状态
    // 针对当前页面进行缓存
    beforeRouteEnter (to, from, next) {

      next(vm => {
        // 通过 `vm` 访问组件实例
        vm.$route.meta.keepAlive = true;
      })
    }

	created(){
      let key = this.$route.fullPath
      this.$store.dispatch('setClosePage', {[key]: false})
    }
说明: 我是利用路由的fullpath 做为key。
Logo

前往低代码交流专区

更多推荐