vue路由守卫易错点

路由守卫易错点1. 把beforeEnter和beforeRouteLeave用反beforeEnter是“进入某条路由前”的路由级守卫适合鉴权、参数校验、重定向。beforeRouteLeave是“离开当前组件前”的组件级守卫适合弹窗清理、未保存确认、资源释放。易错点很多人用beforeEnter做离开清理结果离开时根本不触发。2. 误以为beforeRouteEnter能直接拿thisbeforeRouteEnter执行时组件实例还没创建所以没有this。正确用法是next(vm { ... })在实例创建后访问组件。对比beforeRouteUpdate、beforeRouteLeave可以直接用this因为组件已存在。3. 误判触发时机query/params 改变不一定会销毁组件同一路由下只改query如?tabnametuan常常是复用组件不会重新创建实例。这时通常不会触发你期待的“进入新页面”逻辑应该用watch($route)或watch(() $route.query.xxx)beforeRouteUpdate易错点把初始化逻辑只写在created导致切 query 后不刷新数据。4. 忽略守卫层级顺序导致判断重复或冲突常见顺序理解全局前置beforeEach- 路由独享beforeEnter- 组件内beforeRouteEnter。易错点同一鉴权逻辑在三层都写维护困难且可能互相覆盖重定向。建议全局管“通用规则”路由独享管“页面特例”组件守卫管“组件状态”。5. 在守卫里忘记放行Vue Router 3 常见问题调用了守卫却没next()页面卡死。Vue Router 4 则常见返回值写错应返回true/false/redirect。易错点分支多时有漏掉的分支没放行。6. 异步逻辑没处理好造成闪跳或重复跳转守卫里发请求要注意异常分支。易错点请求失败后既没中断也没降级出现空白页或循环跳转。建议统一兜底失败时给明确去向登录页/错误页。7. 组件离开清理不彻底导致“脏状态”回流比如 Vuex 里的弹窗状态、筛选条件、临时编辑数据没清。你的项目就是典型正确示例团课页在beforeRouteLeave里先关闭预约管理弹窗再next()避免切走后状态残留。8. 误用beforeEnter处理组件内部 tab 行为/schedule/index?tabnametuan这种通常是同一路由容器内切换。beforeEnter只在进入该路由记录时触发不是为组件内部 tab 切换设计的。这种场景应在组件里处理query到状态映射必要时配合beforeRouteUpdate或 watcher。9. 把“权限控制”和“UI 展示控制”混在一起权限控制应在守卫/路由层是否允许进入。UI 展示控制应在组件层是否展示按钮、tab、操作项。易错点只隐藏按钮不做路由校验用户仍可直接输 URL 访问。10. 不区分“路由守卫”与“生命周期钩子”守卫解决“是否允许这次导航、导航前后做什么”。生命周期解决“组件创建/更新/销毁时做什么”。易错点把导航问题放在mounted里导致先渲染后跳转体验差。实战记忆口诀进页面拦截beforeEnter/beforeEach组件创建前beforeRouteEnter无this用next(vm...)同组件路由变化beforeRouteUpdate离开组件收尾beforeRouteLeave