雙循環(huán)遞歸匹配路由表
/** *根據(jù)后端返回?cái)?shù)據(jù)要求,導(dǎo)航欄權(quán)限返回的是要展示的所以信息,所以我們只能根據(jù)返回的對象去匹配我們的路由表,把沒有返回的項(xiàng)再路由表里剔除,然后重新生成路由表 */ // 此處數(shù)據(jù)皆為模擬操作,真是數(shù)據(jù)請結(jié)合實(shí)際情況獲取 data: { route: [ // 我們定義好的路由表 {path:"/",name:"a",hidden:true}, {path:"/b",name:"b",hidden:true,children:[ {path:"/b_1",name:"b_1",hidden:true}, {path:"/b_2",name:"b_2",hidden:true}, ]}, {path:"/c",name:"c",hidden:true,children:[ {path:"/c_1",name:"c_1",hidden:true}, {path:"/c_2",name:"c_2",hidden:true}, {path:"/c_3",name:"c_3",hidden:true}, ]}, {path:"/d",name:"d",hidden:true}, ], permisRoute: [ // 后端返回的路由表權(quán)限 {name:"a"}, {name:"b",permission:[ {name:"b_1"}, ]}, {name:"c",permission:[ {name:"c_1"}, {name:"c_2"}, ]}, ] }, methods: { /** * [此處方法應(yīng)寫store里,然后再在beforeEach里去動(dòng)態(tài)添加路由,vue2.0提供了addRoutes方法 * @param {[type]} route [router里面自己定義好的路由表] * @param {[type]} permisRoute [后臺(tái)返回路由表權(quán)限] * @return {[type]} [生成新的路由表] */ filterRoute: function(route,permisRoute) { for(let item of permisRoute){ const name = item.name; for(let item of route){ // 修改hidden,匹配路由表 if(item.name == name){ item.hidden = false; break; } } if(item.permission){ const permisRouteChild = item.permission; const routeChild = route.filter(itme => { return itme.name == name; }) // 遞歸路由表 this.filterRoute(routeChild[0].children,permisRouteChild) } } return route }, filtersHidden: function (arr) { // 上一步只是把里面hidden變成true,把filterRoute返回結(jié)果傳入此函數(shù)可以過濾掉hidden為true的對象 const accessedRouters = arr.filter(route => { if(!route.hidden){ if (route.children && route.children.length) { route.children = this.filtersa(route.children) } return true } }) return accessedRouters }, }
邏輯可能有點(diǎn)復(fù)雜,如果有更好的方法請指教

浙公網(wǎng)安備 33010602011771號(hào)