VUE admin-element 后台管理系统三级菜单实现缓存

VUE admin-element 后台管理系统三级菜单实现缓存

框架无法直接实现三级菜单页面缓存,原因是由于直接缓存时没有把上级路由文件名称缓存进去,所以在框架基础上参考部分文章进行了一些改造

菜单文件,三级菜单引用文件路径修改,在nested下添加新文件src/views/nested/RouteLevelWrapper/index.vue

bash 复制代码
<template>
  <div class="app-main">
    <keep-alive :include="cachedViews">
      <router-view  />
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'RouterViewKeepAlive',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

tagsView.js文件中,增加多层路由缓存

bash 复制代码
  ADD_CACHED_VIEW: (state, view) => {
    if (state.cachedViews.includes(view.name)) return
    if (!view.meta.noCache) {
      //多层嵌套路由缓存问题处理
      if(view.matched.length>2){
        view.matched.forEach(item=>{
          if(item.name){
            state.cachedViews.push(item.name)
          }  
      })
    }else{
      state.cachedViews.push(view.name)
    }
  }
  },
    DEL_CACHED_VIEW: (state, view) => {
         //多层嵌套路由缓存问题处理
      if (view.matched && view.matched.length >= 3) { 
     state.cachedViews = state.cachedViews.filter(item => !view.matched.some(obj => obj.name === item));
      }  
    for (const i of state.cachedViews) {
      //多层嵌套路由缓存问题处理  
      if (i === view.name) {
        const index = state.cachedViews.indexOf(i)
        state.cachedViews.splice(index, 1)
        break
      }
    }
  },

需要缓存的页面名称与菜单配置组件名一致

AppMain 文件中

bash 复制代码
<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

关键是将对应的菜单目录文件名称缓存到cachedViews数组

相关推荐
江城开朗的豌豆18 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
江城开朗的豌豆31 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
江城开朗的豌豆36 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆37 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆38 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆38 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山1 小时前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
先睡5 小时前
Redis的缓存击穿和缓存雪崩
redis·spring·缓存
daols888 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table