vue3,刷新异步路由时,出现No match found for location with path。

142 阅读1分钟

首先说下出现这中的原因,是我们动态添加的路由也包含404,在我们刷新的时候,第一次要执行beforEach,就会出现这个错误,因为matched为空,而我们的代码一定有next({...to}),这就是会导致路由第二次执行beforeEach,而第二次去的时候,路由已经注册完成,就会进入正确页面。

image.png 而若是我们把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 } })
    }
  }
})
```

核心 image.png