Jeecg-Boot keepAlive 清除缓存

本文介绍如何在JeecgBoot中利用Vuex和Vue路由钩子解决关闭tab页时的keep-alive缓存问题,通过全局状态管理和页面生命周期钩子实现动态缓存管理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

解决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。
<think>好的,我现在需要解决用户的问题:在JeecgBoot中添加菜单后刷新页面未显示。根据用户提供的引用内容,特别是引用[1]提到的三级菜单需要同时设置一级和二级为缓存路由,这可能是一个关键点。 首先,用户可能按照常规流程添加了菜单,但忽略了缓存路由的设置。JeecgBoot中,菜单的显示可能依赖于正确的路由配置,尤其是当涉及到多级菜单时。如果三级菜单的一级和二级父菜单没有设置为缓存路由,可能会导致子菜单无法正确加载或显示。这是因为前端路由可能依赖于父级路由的缓存状态来保持子组件的状态。 接下来,我需要验证这个假设是否正确。根据引用[1]的描述,用户反馈三级菜单设置缓存无效,但将一级和二级也设置为缓存路由后问题解决。因此,解决方案可能包括检查所有父级菜单的路由缓存设置,并确保它们都被正确启用。 此外,还需要考虑其他可能的原因,比如菜单权限配置是否正确,用户角色是否有权限访问新添加的菜单,或者前端代码是否有缓存需要清除。不过根据用户提供的引用,主要问题可能集中在路由缓存配置上。 因此,解决方案应首先指导用户检查并设置所有相关父级菜单的缓存路由,然后重新编译和部署前端代码,确保配置生效。如果问题仍然存在,再进一步检查权限和缓存清除步骤。</think>在JeecgBoot中添加菜单后刷新页面不显示,通常由以下原因及解决方案构成: ### 一、主要原因分析 1. **未设置父级菜单缓存**(核心问题) 当添加三级菜单时,需要将一级和二级父菜单的`是否缓存路由`属性同时设置为"是",否则子菜单无法正确加载[^1] 2. **前端代码未更新** 新增菜单配置后,若未重新编译前端代码,会导致菜单数据未同步更新 3. **权限配置缺失** 新增菜单未绑定对应的角色权限,或当前登录账号未分配对应权限 ### 二、完整解决方案 **步骤1:检查菜单缓存设置** 1. 进入`系统管理 -> 菜单管理` 2. 定位到新菜单的**所有上级菜单** 3. 逐个编辑上级菜单,勾选`是否缓存路由`选项 4. 保存后刷新页面(需确保所有父级菜单都启用缓存) **步骤2:清理前端缓存** ```bash # 进入前端项目目录执行 npm run build ``` 或手动清除浏览器缓存(Ctrl+F5强制刷新) **步骤3:验证权限配置** 1. 检查`角色管理`中是否为新菜单分配权限 2. 确认用户角色包含该权限 3. 测试时使用管理员账号验证 ### 三、补充说明 如果使用异步路由加载方式,还需要注意: 1. 确保菜单对应的前端组件路径正确 2. 检查路由配置是否包含`keepAlive`属性 ```js // 正确路由配置示例 { path: '/demo', name: 'demo', component: () => import('/@/views/demo/index.vue'), meta: { keepAlive: true // 必须设置为true } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值