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

进击的小白兔vl2025-07-05 9:49

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

菜单文件，三级菜单引用文件路径修改，在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数组