适用于:Vue2.x VueRouter3.x
动态添加路由一般应用于受权限控制的路由菜单,由后端返回可以判断该角色具有的权限,前端处理出一份符合权限的路由表,使用addRoutes方法动态添加权限路由。
router.beforeEach(async (to, from, next) => {
if (token) {
/* has token */
if (to.path === "/login") {
next({ path: "/home" });
} else {
// 是否刷新了浏览器
if (刷新了浏览器) {
router.addRoutes(asyncRouter)
//如果 addRoutes 并未完成,路由守卫会一层一层的执行执行,直到 addRoutes 完成,找到对应的路由
next({ ...to, replace: true })
}
next()
}
} else {
if (whiteList.includes(to.name)) {
// 在免登录白名单,直接进入
next();
} else {
next({ path: "/login" });
}
}
});
router.afterEach(() => {
});