动态路由刷新后消失或重定向到404

动态路由刷新后消失或重定向到404

1. 场景及原因

场景：使用router.addRoute加载路由
原因：当登录或跳转页面，刷新时都会触发路由守卫。

1.1 登录

登录后路由守卫中没有加载动态路由，则会导致菜单内容加载不出来。

1.2.刷新

当用户刷新页面时，Vue Router 动态路由的内存会消失，会重新触发路由守卫（如 beforeEach），所以也需要重新加载动态路由。

2. 解决

// 在路由守卫中，判断是否加载了动态路由，没加载则加载
if (判断是否加载了动态路由) {
// 加载动态路由
    await initDynamicRouter();
    // 强制重新导航并替换历史记录,更新路由表
    return next({ ...to, replace: true });
  }

使用 next({ …to, replace: true })解释：

1. to 是当前路由对象（即用户正在访问的页面）。{ …to } 保留目标路由的所有属性（路径、参数等）。
2. 如果路由守卫发现需要重定向（例如权限校验失败），直接调用 next(‘/login’) 会通过 push 跳转到登录页，导致历史栈中保留当前页面的记录（如 /dashboard）。此时用户点击“后退”会返回 /dashboard，可能再次触发重定向，形成死循环。