首先描述一下我的问题：我是用beforeEach路由守卫来动态生成 路由，当我刷新页面首次访问动态路由时，会发生白页。
但是第二次，通过左侧导航 or 更改url路由链接去访问动态路由，就会正常显示。
但如果再次 刷新页面，又会出现白页。
最开始的代码是这样写的：
router.beforeEach((to, from, next) => {
let hasRoutes = store.state.hasRoutes
if (!hasRoutes) { // 如果还没有动态绑定路由，那么就去获取数据，并动态绑定路由啦
getNavPerm().then(res => {
console.log('我是beforeEach里面的异步请求')
// 进行动态路由绑定
dynamicRouterBind(res.data.data.nav)
hasRoutes = true
store.commit('changeHasRoutes', hasRoutes) // 设置为已绑定路由状态
})
}
console.log('next')
next()
})
分析一下：为什么会出现刷新变成白页呢？一开始百思不得其解。真的想了好久，找bug真是让人年老色衰（哭泣）。且听我细细说来，边找问题边改写。
问题1：
要想进行动态路由绑定，需要进行一个异步请求。而next() 函数却在外部，这就会导致同步的代码next()会先被执行，然后异步请求getNavPerm函数才会执行完毕。所以会造成先跳转路由出现白页，然后才动态绑定路由成功。
问题1解决办法：
把 next() 移入 异步请求函数里面，确保 动态路由绑定成功后，才进行跳转。（以为这样改就正确了？你太小瞧它了。bug还是毫无改善，一样是刷新页面出现白页，那咱们在问题2里面再研究研究）
找问题前，我们来讲讲next() 函数吧。我是参考了这篇文章，突然就如同醍醐灌顶了。 VUE 路由守卫 next() / next({ …to, replace: true }) / next(‘/‘) 说明.
我们一般使用路由守卫都是这样的对吧？
beforeEach((to, from, next) => {
to // 要去的路由
from // 当前路由
next() // 放行的意思
}
但我们有时也能看到 next('login')，next(to)，next({ ...to, replace: true })这样类似的next对吗？这些就是带了参数的next。那它们和不带参数的next()有什么区别呢？
next()：放行的意思，直接进行路由的变化- 诸如
next('login')，next(to)，next({ ...to, replace: true })：都不是放行，而是中断此次的路由，进行下一次新的路由，那么就会又重新经历一次beforeEach函数
比如说我使用next(‘login’)
beforeEach((to, from, next) => {
next('login')
}
你以为它会直接跳转到 login 路由吗？no no no。
它会这样:
- 进入beforeEach后，发现要 next(‘login’)跳转到 login路由。但是我们上面已知的next(‘login’)不是放行，而是中断此次的路由，进行下一次新的路由，又执行beforeEach。
- 进入beforeEach后，发现要 next(‘login’)跳转到 login路由。但是我们上面已知的next(‘login’)不是放行，而是中断此次的路由，进行下一次新的路由，又执行beforeEach。
…
…
就形成了无限循环，会警告 “Detected an infinite redirection in a navigation guard”
问题2
通过上面对next的分析，就来讲讲 解决问题一 中代码的问题吧，如下。
我们看到，在异步请求函数中，我们动态绑定了路由后，就进行了 next() 放行，出现白页；就感觉像是我们虽然添加了动态路由，但是next() 时，动态路由好像没有被真正添加进去，所以没有找到相应的路由，而在第二次不刷新跳转时才找到动态路由。
也就是说 是不是可能addRoute()是异步操作（这点我是猜测，没找到确信，但真实情况就像是这样），所以 addRoute()后就立刻访问被添加的路由，然而此时addRoute()没有执行结束，因而找不到刚刚被添加的路由导致白屏。因此需要从新访问一次路由才行。
问题2解决办法
next() 是直接放行了，而我们的需求是 不要直接放行，需要从新访问一次路由。那么聪明的你应该知道怎么办了吧？
没错，就是使用 带参数的next，next({ ...to, replace: true })或者next({ ...to })或者next(to)。
说明一下：
next({ …to, replace: true })中的replace: true只是一个设置信息，告诉VUE本次操作后，不能通过浏览器后退按钮，返回前一个路由。- 因此
next({ …to, replace: true })可以写成next({ …to })，不过你应该不希望用户在addRoute()还没有完成的时候，可以点击浏览器回退按钮搞事情吧。 - 其实
next({ …to })的执行很简单，它会判断：
如果参数to不能找到对应的路由的话，就再执行一次beforeEach((to, from, next)直到其中的next({ …to})能找到对应的路由为止。
所以最后的解决代码为：
router.beforeEach((to, from, next) => {
let hasRoutes = store.state.hasRoutes
if (!hasRoutes) { // 如果还没有动态绑定路由，那么就去获取数据，并动态绑定路由啦
getNavPerm().then(res => {
// 进行动态路由绑定
dynamicRouterBind(res.data.data.nav)
hasRoutes = true
store.commit('changeHasRoutes', hasRoutes) // 设置为已绑定路由状态
next({ ...to, replace: true })
})
}
else {
console.log('next')
next()
}
})
