嘉兴商城网站开发设计阿里云域名注册万网

之前有人问我 ，如果是二级路由如何添加，这里我做一个补充吧。直接拿方法去用就行。也不做解释了。稍微看下就能看懂了

假设，后端返回给我们一个数据 [“/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框架，包括路由权限和导航栏权限都会封装好，开箱即用。