首先说下出现这中的原因,是我们动态添加的路由也包含404,在我们刷新的时候,第一次要执行beforEach,就会出现这个错误,因为matched为空,而我们的代码一定有next({...to}),这就是会导致路由第二次执行beforeEach,而第二次去的时候,路由已经注册完成,就会进入正确页面。
而若是我们把404,注册为常态路由,第一次执行beforeEach的时候,会因为匹配不到,直接跳转404页面,这时只需在动态添加完路由,进行判断,如果去往404,则重新导航到上一次的路径。
```
router.beforeEach(async (to: any, from: any, next: any) => {
//获取token,去判断用户登录、还是未登录
const token = userStore.token
//获取用户名字
const username = userStore.username
//用户登录判断
if (token) {
// console.log(to.meta )
//登录成功,访问login,不能访问,指向首页
if (to.path == '/login') {
next({ path: '/' })
} else {
//登录成功访问其余六个路由(登录排除)
//有用户信息
if (username) {
//放行
next()
} else {
//如果没有用户信息,在守卫这里发请求获取到了用户信息再放行
try {
//获取用户信息,添加异步路由。
await userStore.userInfo()
//放行
//万一:刷新的时候是异步路由,有可能获取到用户信息、异步路由还没有加载完毕,出现空白的效果
if (to.path == '/404'&&to.redirectedFrom){
next({path:to.redirectedFrom.fullPath,replace:true})
}else {
next({...to,replace:true})
}
} catch (error) {
//token过期:获取不到用户信息了
//用户手动修改本地存储token
//退出登录->用户相关的数据清空
await userStore.userLogout()
next({ path: '/login', query: { redirect: to.path } })
}
}
}
}
else {
//用户未登录判断
if (to.path == '/login') {
next()
} else {
next({ path: '/login', query: { redirect: to.path } })
}
}
})
```
核心