解决 Vue3 + ElementPlus 动态路由刷新页面后跳转到 404

这个问题的根本原因就是，动态请求的路由数据还没有添加到路由中导致无法匹配到导致的。 await initRoutes(type) 动态添加完路由之后再进行路由跳转。

router.beforeEach(async (to, from, next) => {
  const { isLogin, login, setUserInfo } = useLogin()
  await setUserInfo()
  if (!isLogin()) {
    login()
    next()
  } else {
    const type = to.matched.some((record) => record.name == 'Admin') ? 'Admin' : 'Release'
    const { getRoutes, setRoutes } = useRoutes()
    const routes = getRoutes(type)
    if (routes.length === 0) {
      await initRoutes(type)
      next({ path: to.path, query: to.query })
    } else {
      setRoutes(routes, type)
      next()
    }
  }
})

扩展阅读

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