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数组

相关推荐
daols882 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
涛哥码咖4 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
盛夏绽放6 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
markyankee1019 小时前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
翻滚吧键盘11 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹11 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
Q_9709563913 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
翻滚吧键盘13 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js