Vue 导航守卫如何实现登录后自动跳转回用户之前访问的目标页面

登录跳转核心是“存得准、判得清、跳得稳”：未登录时在前置守卫中拦截并存目标路径至login页query；登录成功后跳转该路径；主动登录链接也需携带redirect；登出时须清理redirect避免误跳。

核心思路是：用户尝试访问受保护页面时，先记录目标路径；登录成功后，读取并跳转到该路径。关键在于“存得准、判得清、跳得稳”。

在全局前置守卫中拦截未登录请求

当用户访问需要登录的路由（比如 /dashboard）但尚未登录时，不直接放行，而是把目标路径存起来，并强制跳转到登录页：

1. 检查目标路由是否设置了 meta.requiresAuth: true
2. 确认当前无有效 token 或登录状态（如 store.state.token 为空）
3. 调用 next({ name: 'Login', query: { redirect: to.fullPath } })，把目标路径作为 query 参数传过去

登录组件接收并保存 redirect 参数

登录页路由配置需支持接收参数，例如：

1. 路由定义里加 props: route => ({ redirect: route.query.redirect })
2. 组件内通过 props: ['redirect'] 声明接收
3. 登录成功后，用 this.$router.push(this.redirect || { name: 'Home' }) 跳转回原页面

从链接入口主动携带 redirect

用户在任意页面点击“登录”按钮或链接时，也应提前带上当前路径，确保登录后能返回：

1. 使用 <router-link :to="{ name: 'Login', query: { redirect: $route.fullPath } }">
2. 或在方法中调用 this.$router.push({ name: 'Login', query: { redirect: this.$route.fullPath } })

退出登录时清理 redirect 避免误跳

用户登出后，若仍保留 redirect 值，下次登录可能跳到已失效或不相关的页面：

1. 登出成功后，手动清除 sessionStorage / localStorage 中的 redirect 记录
2. 或重置 Vuex 中的 redirect 状态（如果用 store 管理）
3. 避免依赖浏览器缓存或未清理的 query 参数造成跳转异常