首先说明一下vue-router4.0删除了 addRoutes的方法, 而是用addRoute代替。那么意味着我们动态添加路由的时候需要一个一个的添加。看下官方文档解释,添加新路由同时需要触发新路由才能显示页面
先看下这种方式:在路由守卫中添加动态路由(router4.0中next为可选)
// 获取权限的路由数组
const list = await store.dispatch("setUserInfo");
list.forEach((item) => {
router.addRoute(item);
});
return to.fullPath;
// 或者return true
表面上跟以前的添加没有太大的问题,然而如果使用return to.fullpath跳转,页面会进行无限循环,而使用return true跳转则会显示无法匹配该路由。这虽然有很多疑惑,但我们还是重回到文档的解析,文档中给了一个路由守卫动态添加路由的解决方案。
从红色框中看出,我们进行路由跳转的时候需要判断是否已经添加过路由了,按照这样的方法,那我也来写两个方法进行判断,我们把代码改进一下
// 获取权限的路由数组
const list = await store.dispatch("setUserInfo");
if (hasRoute(to)) {
const result = generateRoute(to, serviceRouter);