前端框架element-admin-vue keep-alive 三级菜单失效解决方案

出处:https://github.com/PanJiaChen/vue-element-admin/issues/406

1.解决keep-alive失效，在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();
})

 

　　

　　

2.解决面包屑失效

• 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('permission/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
        );
    },

   

　　

 

 

 

标签：vue,admin,recursiveTreeByLastLevel,alive,item,state,rData,data,matched
来源： https://www.cnblogs.com/lyzi/p/16457976.html