【vue-element-admin】多级菜单页面缓存问题

小伙伴们，最近小编接手一个系统，前端是使用vue-element-admin框架，无非就是vue+element ui来实现的后台管理系统。
在这个系统中，小编向任务发起者了解到改系统之前是由他使用代码生成器生成的，然后不行再手动修改的，导致许多的不规范问题。
有个问题就是该系统目前由于有些页面还未开发，使用旧的页面，因此使用iframe引入旧页面，然后又是多级页面（三级）。目前有的问题就是三级菜单页面无法缓存的问题，经过百度都是说页面中的name要与菜单配置中的name一致，小编这里使用的动态路由菜单，发现数据库配置的name和页面中name是一致的呀为啥二级的菜单页面有缓存可是二级以上的菜单页面就不会缓存了呢？
——有的说平化三级菜单和二级同层级再存入页面缓存，可是这样就导致菜单结构改变了
——有的说因为二级的name没有加上去，好像有道理。但是要怎么加上去呢？加载页面的name？还是菜单配置文件里的name？小编试了好像都没得反应
——还有把三级（概念上的）转化为二级（真实），emmm，好像是可以。
——在vue-element-admin开发文档中有关于多层级目录的

小编好像懂了，发现数据库中的菜单配置使用的二级菜单都是base为component

然后代码中component=‘base’的时候是使用同一个空布局页面的


在vue插件可以看到每次点击时候都会导致BaseLayout再次刷新而不是在里面直接添加三级页面组件，而且不能缓存页面的搜索值数据

因为这里使用的是BaseLayout这个为页面的name和我们菜单配置里的name（数据库中的code字段）不一致导致的。

所以小编将component设置指定的一个二级路由页面

对应页面

当这些都配置好了，发现还是不行？可能是因为在缓存菜单的name时候只有缓存了三级菜单的name，而没有对三级菜单的父级（也就是这个三级菜单的二级菜单）的name进行缓存，找到src——store——modules——tagsView.js中的ADD_CACHED_VIEW看看这里是不是只有对该点击的菜单进行缓存，在三级菜单时候没有对该三级菜单的二级菜单name进行缓存，如果是将其进行配置，如下是小编的配置方式，可自行发挥

当弄到这里基本就可以对三级菜单的页面进行缓存了，如果在该菜单页输入数据，切换页面后再切回来就不会发生数据丢失的问题了。
这里是小编对于vue-element-admin多级菜单目录页缓存失败，输入数据切换页面数据丢失的一个处理方法。如果你有别的方法，麻烦也跟小编分享一下哦~