直接展示代码
1.把含有3级router-view的文件改为
<template>
<router-view />
</template>
<script>
export default {
name: 'Blank'
}
</script>
2
1). 需要把所有页签存在vuex中，可以参考vue-element-admin项目中store有个tagsView.js文件
2). 在AppMin.vue文件中，如图加上这两句
image.png
<keep-alive :include="cachedViews">
<router-view :key="key" />
</keep-alive>
cachedViews() {
// console.log(this.$store.state.tagsView.cachedViews,'this.$store.state.tagsView.cachedViews')
return this.$store.state.tagsView.cachedViews
},
3.在全局路由守卫中加上这段代码：（仅仅只是满足三级菜单缓存）
image.png
if (to.matched && to.matched.length > 2) {
for (let i = 0; i < to.matched.length; i++) {
const element = to.matched[i]
if (element.components.default.name === 'Blank') {
to.matched.splice(i, 1)
}
}
}
这时会出现一个问题
1.刷新页面后,首次切换页面并没有保存状态,切换后再回来操作才能保存.
解决方法
用数组存放需要保存功能的二级页面名称,只要三级路由结构的路由中含有这些名称,就把三级路由结构中的二级路由手动删除.
//saveBlankPages是拥有三级菜单的二级菜单名称合集
//我拿取这个数据是在src\components\Breadcrumb这个目录下，找到所有的二级菜单缓存起来
if (to.matched && to.matched.length > 2) {
for (let i = 0; i < to.matched.length; i++) {
const element = to.matched[i]
const Index = saveBlankPages.findIndex((item) => {return item === element.name})
if (Index>=0) {
to.matched.splice(i, 1)
}
}
}
原文参考：https://blog.csdn.net/weixin_46995731/article/details/123665776
