商务网站建设的组成包括,做一个兼职app多少钱,宜宾县企业项目建设影响环境登记表网站,百度热议排名软件之前有人问我 #xff0c;如果是二级路由如何添加#xff0c;这里我做一个补充吧。直接拿方法去用就行。也不做解释了。稍微看下就能看懂了
假设#xff0c;后端返回给我们一个数据 [“/defa”,/defa/defa1] 这样的一个路由表#xff0c;我们就需要通过这个路…之前有人问我 如果是二级路由如何添加这里我做一个补充吧。直接拿方法去用就行。也不做解释了。稍微看下就能看懂了
假设后端返回给我们一个数据 [“/defa”,/defa/defa1] 这样的一个路由表我们就需要通过这个路由表去筛选匹配我们的动态路由然后在进行添加。假设我们的动态路由是
[{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层也就是说动态路由里只有父路由子路由多的无法筛选了。
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] 第二个参数就是前端定义的整个的动态路由,函数的返回值就是我们的数据啦。我们可以根据这个数据动态添加路由或者是导航栏的权限控制
简易版的动态添加路由可以作为参考这里没有加入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框架包括路由权限和导航栏权限都会封装好开箱即用。
