使用keep-alive缓存页面 并解决三级菜单不能缓存的问题

直接展示代码
1.把含有3级router-view的文件改为

2
1). 需要把所有页签存在vuex中，可以参考vue-element-admin项目中store有个tagsView.js文件
2). 在AppMin.vue文件中，如图加上这两句

image.png

 
        
      



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