vue3中的beforeEach里面的next函数---刷新页面导致白页

首先描述一下我的问题：我是用beforeEach路由守卫来动态生成路由，当我刷新页面首次访问动态路由时，会发生白页。但是第二次，通过左侧导航or更改url路由链接去访问动态路由，就会正常显示。但如果再次刷新页面，又会出现白页。最开始的代码是这样写的：router.beforeEach((to, from, next) => {let hasRoutes = store.state.has

苏米素

10176人浏览 · 2022-04-23 21:04:10

苏米素 · 2022-04-23 21:04:10 发布

首先描述一下我的问题：我是用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()
	}
})