網站開發(fā)需要的編程軟件杭州百度快速排名提升
之前有人問我 ,如果是二級路由如何添加,這里我做一個補充吧。直接拿方法去用就行。也不做解釋了。稍微看下就能看懂了
假設,后端返回給我們一個數據 [“/defa”,"/defa/defa1"] 這樣的一個路由表,我們就需要通過這個路由表去篩選匹配我們的動態(tài)路由,然后在進行添加。假設我們的動態(tài)路由是
[{path: "/defa",name: "defa",component: () => import("@/views/DefaCat.vue"),children: [{path: "/defa/fase1",name: "homelist1",component: () => import("@/views/UserZi.vue"),},{path: "/defa/fase9",name: "homelist9",component: () => import("@/views/UserZi.vue"),},],},{path: "/defa/fase2",name: "homelist2",component: () => import("@/views/UserZi.vue"),},
];
這樣的一組數據,按照后端返回給我們的數據表,我們最終要拿到的數據是。
[{path: "/defa",name: "defa",component: () => import("@/views/DefaCat.vue"),children: [{path: "/defa/fase1",name: "homelist1",component: () => import("@/views/UserZi.vue"),},],},
];
這樣才符合我們的設計需要,所以這里添加了一個方法,能夠篩選出符合我們的代碼,注意,這有2個弊端,第一,是當你父路由不存在后端的路由表而子路由存在時,子路由照樣會被剔除掉,第二解釋,只能篩選2層,也就是說動態(tài)路由里只有父路由子路由,多的無法篩選了。
const filterRoutes = (targetPaths:any, sourceRoutes:any) => {return sourceRoutes.map((route:any) => {const filteredChildren = route.children? route.children.filter((child:any) => targetPaths.includes(child.path)): [];return {...route,children: filteredChildren,};}).filter((route:any) => route.children.length > 0 || targetPaths.includes(route.path));
};
函數接收2個參數,第一個參數是后端傳給我的路由表[“/defa”,"/defa/defa1"] ,第二個參數就是前端定義的整個的動態(tài)路由,函數的返回值就是我們的數據啦。我們可以根據這個數據動態(tài)添加路由或者是導航欄的權限控制
簡易版的動態(tài)添加路由,可以作為參考,這里沒有加入token是否存在的邏輯。
router.beforeEach((to, from, next) => {console.log(to.name, 99);if (!to.name) {filterRoutes(arrlist,routerlist).map((item: any) => {router.addRoute(item); });next({ ...to, replace: true });} else {next();}next();
});
現在來說應該算是完全好了,這個這個權限組件,這里我們前端做的事情太多了,可以把活適當的分一點給后端,讓后端傳我們能直接用的路由表,不是更爽嗎 哈哈。
我看哪天有時間,我會出一版封裝好的有權限管理的vue3框架,包括路由權限和導航欄權限都會封裝好,開箱即用。