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

十大暴利行业加盟湖南网络优化服务

wzjs 2025/8/3 2:00:53

十大暴利行业加盟,湖南网络优化服务,深圳创意设计网站,2021电商行业发展现状及趋势VUE admin-element 后台管理系统三级菜单实现缓存框架无法直接实现三级菜单页面缓存，原因是由于直接缓存时没有把上级路由文件名称缓存进去，所以在框架基础上参考部分文章进行了一些改造菜单文件，三级菜单引用文件路径修改，在…

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

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

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