vue-element-admin 中多级菜单栏导致的路由缓存异常解决方案

问题:

当菜单栏左侧的层级超过2级就会导致keep-alive无法正常缓存路由,像这样

原因是打开三级页面<keep-alive include>中数组添加的是第三级页面的组件名,而页面实际展示的是

二级父页面包含的=>三级页面

而二级父页面组件名为加入到keep-alive 的 include数组中,导致超过2级的页面无法缓存

解决方案:

        方案1:

        最开始我以为只需要将二级父页面组件名加入到include的数组中就可以了,但是会引发新问题,就是像这种二级菜单下有多个同级的三级菜单,如果同时打开两个同级的三级菜单,关闭一个后,会导致另一个同级的三级菜单(页面之间的切换时)路由缓存失效,因为include中的数组把二级的组件名移除了,如果通过逻辑判断不移除,又会导致关闭页面后再次打开始终有缓存,所以该方案始终有瑕疵

        方案2:[最优解]

        考虑到二级菜单打开页面是没有父页面组件的,不存在缓存问题,于是转换思路把3级页面在不影响菜单结构的情况下复制一份到一级菜单下成为二级菜单,并设置hidden:true隐藏。

然后三级菜单设置 redirect="复制的二级菜单的path" ，也就是点击该三级菜单会跳转到他重定向的二级页面下，这样就能正常使用缓存了

hidden未设置为true的情况下结构是这样的

 

这样会有一个问题，那就是该栏不是选中时的蓝色，还需要再次点击下才会变为选中状态，所以需要修改SidebarItem.vue的代码

index属性原本是他的path路径改为在redirect存在的情况下，设置为redirect的路径

 

 这样点击第三级菜单两个都会是选中的颜色，然后再把下面的隐藏就完工了

 但是这样为了三级菜单去手动的配置路由太麻烦，只要需要在router.addRoutes(accessRoutes)前通过js完成三级的路由的拷贝，redirect,hidden设置就可以了，代码如下

        const accessRoutes = await store.dispatch('permission/generateRoutes', auths)
          // dynamically add accessible routes
          for (const index in accessRoutes) {
            if (accessRoutes[index].children){
              let temp=[]
              for (const child in accessRoutes[index].children) {
                const temp_child=accessRoutes[index].children[child]
                if (temp_child.children){
                  for (let i in temp_child.children){
                    const t2=temp_child.children[i]
                    const temp_child2={...t2}
                    temp_child2.hidden=true
                    temp.push(temp_child2)
                    accessRoutes[index].children[child].children[i]['redirect']=accessRoutes[index].path+'/'+t2.path
                  }
                }
              }
              accessRoutes[index].children=accessRoutes[index].children.concat(temp)
            }
          }
        router.addRoutes(accessRoutes)

 这样就完结了！