当前位置：首页 > news >正文

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

news 2025/7/3 9:43:35

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

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

<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文件中，增加多层路由缓存

  ADD_CACHED_VIEW: (state, view) => {if (state.cachedViews.includes(view.name)) returnif (!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 文件中

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