三级菜单页面缓存keep-alive失效

[CT940828071]

二级菜单代码为，点击三级菜单时，layout组件里，cachedViews没有存进二级菜单那个name，从而导致三级页面设置为缓存时失效

[nomyfan]

~~我也遇到了这个问题，自己想到了一个workaround。在meta里添加一个parentName，然后修改ADD_CACHED_VIEW方法，在把当前路由缓存的时候可以根据parentName做缓存。~~ 参考#406，把menu和routes分开了。

[wanqianjin]

对于多级路由嵌套使keep-alive失效的情况，在src下面的permission.js文件中加入下面代码： router.beforeResolve((to, from, next) => { if (to.matched && to.matched.length > 2) { to.matched.splice(1, to.matched.length - 2) } next() }) 这样做就相当于让matched匹配的路由始终都是2个，tags-view导航就能缓存所有打开的页面了。 这样做会影响到面包屑导航： 下面是给出一个解决方案 1.recursiveTreeByLastLevel方法： /**

筛选出面包屑导航的路由 筛选出最后一个路由的整个树形结构 自定义查找字段, 根据最后一级某个字段查找完整树(整个父类) @param {} val 要查找对比的值 @param {} data 要查找的数据 @param {*} fKey 要查找对比的字段 */ export const recursiveTreeByLastLevel = (val, data, fKey = 'value') => { let rData = []; for (let i = 0, len = data.length; i < len; i++) { rData.push(data[i]); if (data[i].children && data[i].children.length > 0) { rData = rData.concat(recursiveTreeByLastLevel(val, data[i].children, fKey)); if (rData.some(item => item[fKey] === val)) return rData; } if (data[i][fKey] === val) return rData; rData = []; } return rData; } 2.使用这个方法去筛选出想要的路由。 // 筛选出面包屑导航的路由（在src下面的permission.js文件中） router.afterEach((to, from, next) => { var routerList = recursiveTreeByLastLevel(to.name, store.state.permission.routes, 'name') store.commit('permission/setBreadcrumbList', routerList) // 经过vuex缓存 }) 3.在store下面的permission.js加入如下代码 const mutations = { SET_ROUTES: (state, routes) => { // 所有角色都能访问的普通路由(login、404page) + 需要鉴权的路由 state.routes = constantRoutes.concat(routes) }, setBreadcrumbList:(state, routerList)=> { state.breadcrumbList = routerList } } 4.在面包屑的文件（‘src/components/Breadcrumb/index’）里面取用即可 getBreadcrumb() { // only show routes with meta.title let breadcrumbList = this.$store.state.permission.breadcrumbList let matched = breadcrumbList.filter(item => item.meta && item.meta.title) const first = matched[0] if (!this.isDashboard(first)) { matched = [{ path: '/dashboards', meta: { title: '首页' }}].concat(matched) } this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) },

[LBJZN]

哥，想问下根据您提供的代码，缓存和面包屑的没问题了，但是当前页面是三级页面的时候，侧边栏没有选中高亮，之前没根据您的代码修改是可以的。 之前是在src/layout/components/Sidebar/index.vue中改成了这样实现的三级页面时侧边栏选中高亮 activeMenu() { const route = this.$route const { meta, path, hidden } = route // if set path, the sidebar will highlight the path you set if (meta.activeMenu) { return meta.activeMenu } if (route.matched.length > 2){//设置三级菜单点亮左侧菜单 return route.matched[1].path }else{ return path } },