注销需先清除token、sessionStorage、cookie等登录态再跳转，推荐用replace避免返回历史页，Vue Router用router.replace('/login')，React Router用navigate('/login', {replace: true})。
点击注销按钮后如何清空登录态并跳转首页
前端注销不是单纯跳转页面，关键在清除 token 或 session 数据后再导航，否则用户刷新页面还能“假装已登录”。localStorage 和 sessionStorage 是最常被遗忘的清理点。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先调用退出接口（如
POST /api/logout），但别依赖它来清状态——后端登出失败时前端仍需主动清理 - 同步清除所有客户端凭证：
localStorage.removeItem('token')、sessionStorage.clear()、document.cookie = 'auth=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/' - 再执行路由跳转，避免跳转后因状态残留触发重定向回登录页或报错
Vue Router 中注销后跳转到 /login 的写法
用 router.push() 最直接，但要注意是否需要强制刷新或重置路由状态。默认情况下，router.push('/login') 不会重新加载组件实例，如果 /login 页面有缓存逻辑（比如用了 <keep-alive>），可能显示旧数据。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
router.replace('/login')替代push，防止用户点返回键回到注销前页面 - 若使用 Vue Router 4，可加
{ replace: true }配置项，效果等同 - 如需彻底重载登录页（例如清除表单输入），可在路由配置中为
/login设置meta: { keepAlive: false }，或手动在组件beforeRouteEnter钩子中重置 data
React Router v6 注销后 navigate 到登录页的注意事项
navigate() 是 v6 唯一推荐的跳转方式，但它不会自动清空 history 栈里的敏感路径（比如 /dashboard）。用户点浏览器返回键仍可能回退到受保护页面，造成视觉错觉。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 调用
navigate('/login', { replace: true })，确保不留下注销前的记录 - 如果用了
useNavigatehook，注意它不能在事件回调外直接调用（比如异步请求结束后），需用useEffect或包装成事件处理器 - 配合
useLocation()检查当前路径，避免重复跳转；例如已在/login还触发注销，会导致白屏或无限重定向
为什么注销后跳转有时会卡住或没反应
常见原因是跳转逻辑被阻塞在异步操作里，或者路由守卫（如 router.beforeEach）拦截了目标路径但没正确放行。
典型错误现象：
- 点了注销按钮，控制台没报错，但页面没变化 → 检查是否忘了调用
navigate或router.push，或该函数被定义但没执行 - 跳转后立刻又被重定向回登录页 → 守卫里判断登录态的逻辑有误，比如读取了未及时清除的
localStorage.token - 点击返回键回到 dashboard 且菜单高亮异常 →
replace: true没生效，或路由缓存未清理
最容易被忽略的是：token 清除和跳转之间没有等待接口响应完成，导致后端还没登出、前端就跳走了，下次请求仍带旧 token 被拒，又触发未登录重定向。实际项目里，应把跳转放在 await logoutApi() 之后，而不是并行执行。
