vue-element-admin三级子菜单无法缓存

解决keep-alive失效

1.在src目录下permission.js文件添加如下代码

//解决三级菜单keep-alive缓存失效
router.beforeResolve((to, from, next) => {
  if (to.matched && to.matched.length > 2) {
    to.matched.splice(1, to.matched.length - 2)
  }
  next();
})

解决面包屑失效

1.添加recursiveTreeByLastLevel.js 目录：src\utils\ 代码如下

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文件，引入添加的recursiveTreeByLastLevel.js文件

import { recursiveTreeByLastLevel } from '@/utils/recursiveTreeByLastLevel'

router.afterEach((to, from, next) => {
  var routerList = recursiveTreeByLastLevel(to.name, store.state.permission.routes, 'name')
  store.commit('setBreadcrumbList', routerList) // 经过vuex缓存
  NProgress.done()
})

3.修改 src\store\modules\permission.js文件

const mutations = {
  SET_ROUTES: (state, routes) => {
    // 所有角色都能访问的普通路由(login、404page) + 需要鉴权的路由
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  },
  setBreadcrumbList:(state, routerList)=> {
    state.breadcrumbList = routerList
  }
}

4.修改src\components\Breadcrumb\index.vue文件下 getBreadcrumb方法

getBreadcrumb() {
  let breadcrumbList = this.$store.state.permission.breadcrumbList;
  let matched = breadcrumbList.filter(
    (item) => item.meta && item.meta.title
  );
  const first = matched[0]
  if (first && first.name.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
    matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
  }
  this.levelList = matched.filter(
    (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
  );
},