Vue 3 中监听登录状态变化并重定向的核心是监听响应式认证状态（如 Pinia 中的 isLogin 或 user），而非路由本身；状态变化时调用 router.push() 跳转，并需加守卫防止循环重定向，全局校验推荐使用 router.beforeEach 守卫。
Vue 3 中监听登录状态变化并重定向，核心不是靠 watch 直接监听路由，而是监听用户认证状态（比如 token、user 对象或 authStore），再调用 router.push() 主动跳转。
监听响应式登录状态（推荐用 Pinia 或 ref）
假设你用 Pinia 管理登录状态：
- 在 store 中定义
isLogin或user为ref或state属性，确保它是响应式的 - 在组件或逻辑中 import store 和 router，用
watch监听该状态变化 - 状态变为已登录时，跳转到目标页（如 dashboard）；变为未登录时，跳转到 login
示例代码：
import { watch } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
const authStore = useAuthStore()
const router = useRouter()
watch(() => authStore.isLogin, (isLogin) => {
if (isLogin) {
router.push({ name: 'Dashboard' })
} else {
router.push({ name: 'Login' })
}
})
监听 localStorage / cookie 的变化需手动触发
如果登录状态靠 localStorage.token 维护，它本身不是响应式数据，watch 无法自动捕获。你需要：
立即学习“前端免费学习笔记（深入）”；
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 封装一个响应式 getter，例如
computed(() => localStorage.getItem('token'))，但注意：localStorage 变更不会触发更新 - 更可靠的做法是：在登录/登出操作后，显式更新一个 ref（如
tokenRef.value = ...），再监听这个 ref - 或使用事件总线、Pinia action、或者在登录成功回调里直接
router.push
避免无限重定向和重复跳转
常见问题：跳转后又触发 watch，再次 push，造成循环。应加守卫判断：
- 检查当前路由是否已是目标页，再决定是否跳转
- 用
router.currentRoute.value.name对比目标 name - 或在跳转前加标记，如
if (to.name === 'Login' && isLogin) return
示例防重逻辑：
watch(() => authStore.isLogin, (isLogin) => {
const to = router.currentRoute.value
if (isLogin && to.name === 'Login') {
router.push({ name: 'Dashboard' })
} else if (!isLogin && to.name !== 'Login') {
router.push({ name: 'Login' })
}
})
补充：路由守卫更适合全局登录校验
对于“未登录不能进某些页面”这类需求，router.beforeEach 守卫比组件内 watch 更合适：
- 在路由跳转前统一拦截，不依赖组件挂载
- 可结合 meta 字段（如
meta.requiresAuth: true）灵活控制 - 避免每个页面都写重复的 watch 逻辑
简单守卫示例：
router.beforeEach((to, from, next) => {
const authStore = useAuthStore()
if (to.meta.requiresAuth && !authStore.isLogin) {
next({ name: 'Login' })
} else {
next()
}
})
不复杂但容易忽略：监听登录状态的本质是响应式数据驱动跳转，不是监听路由本身；真正需要跳转时，主动推路由即可。
