首先描述一下我的问题:我是用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。
它会这样:
问题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 })
的执行很简单,它会判断:所以最后的解决代码为:
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()
}
})