路由拦截beforeEach和addRouter
注意:
1.一定要理解beforeEach(全局的路由守卫,每一次路由执行都会触发)和addRoutes的运行机制,这里容易陷入死循环,所以一定要做好判断,不要每一次路由调用都执行addRouter的方法
2.使用 addRoutes 钩子后, 直接调用 next() , 如果当前页面的路由是通过 addRoutes 添加进去的,对应的路由不会渲染,当前访问是没法跳转进去的, 所以需要调用 next, 重定向当前的路由(next({…to, replace: true}))
理解:当进入 路由的 前置钩子 (router.beforEach) 的时候,本次跳转时, 路由的结构没有变化,所以我们会认为router.addRoutes没有生效,打印router的option也没有出现新加的路由(其实router.options里面打印不出动态路由,生效了也无法在options里面找到)
let hasMenus = false //判断是否添加过路由router.beforeEach((to, from, next) => {//to: Route: 即将要进入的目标 路由对象//from: Route: 当前导航正要离开的路由//next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。if (hasMenus) {//如果有路由,向下执行next()} else {//如果没有,添加动态路由trendsRouter.forEach(ele => {router.addRoute(ele)});hasMenus = truenext({ ...to, replace: true })}})
如果觉得《vue使用addrouter添加动态路由》对你有帮助,请点赞、收藏,并留下你的观点哦!