侧边栏壁纸
  • 累计撰写 17 篇文章
  • 累计创建 17 个标签
  • 累计收到 1 条评论

目 录CONTENT

文章目录

vueRoute 异步路由刷新页面后路由丢失

马化云
2022-11-17 / 0 评论 / 0 点赞 / 121 阅读 / 240 字
温馨提示:
本文最后更新于 2022-11-20,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

vueRoute刷新页面后路由丢失

初次登录后在addRoutes后,路由是完整的,但是当F5刷新页面后异步路由部分会丢失。

代码

if (userStore.token) {
 if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {      
      // 判断用户获取到权限
      const hasRoles = userStore.roles && userStore.roles.length > 0
      const hasRoute = router.hasRoute(to.name);
      console.log("to.name:", to)
      console.log("hasRoute:", hasRoute)
      console.log("from:", from)
      if (hasRoles) {
         //路由已加载但是异步路由丢失
        if (!hasRoute) {
          // 需要重新获取异步路由
          await userStore.getInfo().then(res => {
            const { roles } = res
            console.log(roles)
            accessRoutes = permissioStore.generateRoutes(roles)
            console.log(accessRoutes)
            accessRoutes.forEach((route) => {
              router.addRoute(route)
            })
            next({ ...to, replace: true })// 导航不会留下历史记录
          })
        }
        else {
         //路由已加载且异步路由没有丢失
          next()
        }
      } else {
         //获取用户信息+路由操作
      }
else{
 if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      // 其他没有访问权限的页面被重定向到登录页面
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
}
博主关闭了所有页面的评论