直接展示代码
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