vue路由守卫易错点

合集 - 小知识(110)

1.前端url取参数以对象展示2023-09-042.el-tree在vue3中全选和展开2023-09-043.瀑布流2023-09-054.瀑布流——前端流行网页布局方式2023-09-055.vue中v-bind和v-model的区别是什么2023-09-056.Vue中key的作用2023-09-057.在Vue 3中，与Vue 2相比，有一些改进和优化的diff算法。2023-09-058.浏览器解析html2023-09-059.浏览器渲染HTML2023-09-0510.Object.entries()2023-09-0511.vue实现虚拟dom转换成真是dom的原理2023-09-0512.全局封装组件处理并发请求不连续的loading2023-09-0613.为什么vue数组下标修改监听不到2023-09-0714.Vue 3 在某些场景下可能表现出比 Vue 2 更低的性能2023-09-0715.vue里表单验证的v-model.number的坑2023-09-0816.有意思的css2023-09-0917.js原生语音转文字2023-09-0918.js手写一个call2023-10-1419.js手写一个apply2023-10-1420. 手写一个 bind 方法2023-10-1421.js寄生组合式继承2023-10-1422.react中的useState修改状态获取最新状态值2023-10-1523.函数柯里化js2023-10-2024.axios请求中断_下载中断和下载进度2023-10-2025.axios请求重试_核心原理2023-10-2026.axios请求重试_axios-retry插件2023-10-2027.虚拟列表-渲染 10 万条数据2023-10-2128.vue-office 组件2023-10-2129.threejs2023-10-2230.把原生 DOM 标签转换后加入到 3D 场景空间中显示2023-10-2431.three.js 物体要使用光线投射技术，计算是否点击位置与物体有交叉2023-10-2432.threejs基本函数2023-10-2533.二分查找算法2023-10-2634.js判断字符串是否连贯2023-10-2635.世界坐标系和模型坐标系2023-10-2836.设置车模型中每个小物体 castShadow = true2023-11-0437.Vue3 echarts 组件化使用 resizeObserver2023-11-0538.网页验证码的作用 *网页中几种常见验证码2023-11-0739.多个装饰器一起es6装饰器2023-11-0740.flex属性2023-11-0741.移动端兼容问题2023-11-0742.那什么是URL、URI、URN？2023-11-0743.threejs的坐标渲染和着色2023-11-1044.渲染管线2023-11-1045.着色器2023-11-1046.基于 three.js 加载器分别加载模型2023-11-1047.echarts自适应大屏方案 亲测有用2023-11-1648.js中关于class类的继承2023-11-1749.有趣的工具2023-11-1750.关于threejs中鼠标左右移动，左动看右边，右动看左边2023-11-1751.有趣的知识点threejs2023-11-1852.uniapp底层跨端原理2023-11-2253.防止XSS（跨站脚本攻击）漏洞2023-11-2254.启动vite和electron项目配置多个主进程2023-11-2355.九宫格css2023-11-2456.css伪类选择器2023-11-2457.uniapp关于uni.getUserProfile的使用2023-11-3058.uniapp有意思的api之openSetting2023-12-0259.处理flex布局2023-12-0260.uniapp登录板块封装(旧接口getUserInfo)2023-12-0361.uniapp获取用户信息2023-12-0462.在项目中使用UEditor碰到的几个问题2023-12-0463.一维数组转二位数组2023-12-1064.使用此函数对数组进行分块，并在最后一组添加特定的值2023-12-1065.如果win报错无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本2023-12-1166.win系统执行脚本报错策略更改无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本2023-12-1267.阅读时间缓存（快应用）2023-12-2868.uniapp去除button的边框2024-01-1069.uniapp中OnShow获取缓存2024-01-1070.js图片懒加载，在不做分页的情况下的解决方案2024-01-1271.width:100%与width:auto区别2024-01-1572.leetcode1047字符串反复去重（栈）2024-01-1573.记录一次uniapp使用scrollview2024-01-2274.微前端(矩阵项目)代码将单个文件合并到指定分支2024-01-2275.自适应高度的过渡2024-01-2476.实现下划线动画2024-01-2977.js不同类型比较2024-01-3178.登录后继续浏览之前的页面2024-02-0179.sse2024-02-1880.关于小说阅读前端翻页插件推荐turn.js2024-02-1981.数组扁平化2024-02-1982.好玩的vue组件2024-02-2083.DOMRect对象2024-02-2084.前端三大系列图解释2024-02-2085.js中关于return和if条件处理2024-02-2086.关于文心一言不能打开F12开发者工具2024-02-2087.js文字处理两端展示中间省略号2024-02-2088.[popover, select] el-popover内有select的时候在选择后会自动关闭2024-02-2089.说一下flex的属性2024-02-2690.vue3中404路由匹配规则2024-02-2691.shape-outside2024-02-2792.createRange表示文档中的一个范围——用于js判断文字添加省略号情况2024-02-2893.uniapp清除指定key缓存2024-03-0794.vue3+uniapp关于button的open-type无法生效2024-03-1195.uniapp+vue3 使用list触底+下拉2024-03-1196.diff算法vue2024-03-1297.动态修改manifest.json2024-03-1898.记录一下大小写导致的问题2024-03-2099.空合并 ?? 和 或 || 的核心区别04-04100.「分包异步化」+「分包预下载」04-20101.SliverPersistentHeader吸顶时，常见问题04-30102.为什么现在我在我的页面，刷新后会出现刷新成功的message，这个不应该是在home里面吗05-04103.loading加载中组件封装05-04104.侧边栏主题切换高级动效实战（Vue2/Element UI 可复用版）05-06105.Opacity 与 RGBA 的本质区别05-09106.node_modules删除快得多的方案05-09

107.vue路由守卫易错点05-13

108.Win11 修改 hosts 后让 Chrome 立即生效的方法05-14109.莱特摩比的一面之缘(前端经验)05-16110.fatal: Not possible to fast-forward, aborting.08-06

收起

路由守卫易错点

1. 把 beforeEnter 和 beforeRouteLeave 用反

• beforeEnter 是“进入某条路由前”的路由级守卫，适合鉴权、参数校验、重定向。
• beforeRouteLeave 是“离开当前组件前”的组件级守卫，适合弹窗清理、未保存确认、资源释放。
• 易错点：很多人用 beforeEnter 做离开清理，结果离开时根本不触发。

2. 误以为 beforeRouteEnter 能直接拿 this

• beforeRouteEnter 执行时组件实例还没创建，所以没有 this。
• 正确用法是 next(vm => { ... }) 在实例创建后访问组件。
• 对比：beforeRouteUpdate、beforeRouteLeave 可以直接用 this，因为组件已存在。

3. 误判触发时机：query/params 改变不一定会销毁组件

• 同一路由下只改 query（如 ?tabname=tuan）常常是复用组件，不会重新创建实例。
• 这时通常不会触发你期待的“进入新页面”逻辑，应该用：

1. watch($route) 或 watch(() => $route.query.xxx)
2. 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?tabname=tuan 这种通常是同一路由容器内切换。
• beforeEnter 只在进入该路由记录时触发，不是为组件内部 tab 切换设计的。
• 这种场景应在组件里处理 query 到状态映射，必要时配合 beforeRouteUpdate 或 watcher。

9. 把“权限控制”和“UI 展示控制”混在一起

• 权限控制应在守卫/路由层（是否允许进入）。
• UI 展示控制应在组件层（是否展示按钮、tab、操作项）。
• 易错点：只隐藏按钮不做路由校验，用户仍可直接输 URL 访问。

10. 不区分“路由守卫”与“生命周期钩子”

• 守卫解决“是否允许这次导航、导航前后做什么”。
• 生命周期解决“组件创建/更新/销毁时做什么”。
• 易错点：把导航问题放在 mounted 里，导致先渲染后跳转，体验差。

---

实战记忆口诀

1. 进页面拦截：beforeEnter / beforeEach
2. 组件创建前：beforeRouteEnter（无 this，用 next(vm=>...)）
3. 同组件路由变化：beforeRouteUpdate
4. 离开组件收尾：beforeRouteLeave

---

路由守卫最常见误区不是“不会写”，而是“写在了错误层级和错误时机”。
先判断你要解决的是“路由进入权限”“组件复用更新”还是“离开清理”，再选守卫，问题会少一大半。

__EOF__