wanqianjin
commented
2 years ago 对于多级路由嵌套使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) },
Question（提问）
Screenshot or Gif（截图或动态图）