路由守衛(wèi)易錯(cuò)點(diǎn)

1. 把 beforeEnter 和 beforeRouteLeave 用反

• beforeEnter 是“進(jìn)入某條路由前”的路由級(jí)守衛(wèi)，適合鑒權(quán)、參數(shù)校驗(yàn)、重定向。
• beforeRouteLeave 是“離開(kāi)當(dāng)前組件前”的組件級(jí)守衛(wèi)，適合彈窗清理、未保存確認(rèn)、資源釋放。
• 易錯(cuò)點(diǎn)：很多人用 beforeEnter 做離開(kāi)清理，結(jié)果離開(kāi)時(shí)根本不觸發(fā)。

2. 誤以為 beforeRouteEnter 能直接拿 this

• beforeRouteEnter 執(zhí)行時(shí)組件實(shí)例還沒(méi)創(chuàng)建，所以沒(méi)有 this。
• 正確用法是 next(vm => { ... }) 在實(shí)例創(chuàng)建后訪問(wèn)組件。
• 對(duì)比：beforeRouteUpdate、beforeRouteLeave 可以直接用 this，因?yàn)榻M件已存在。

3. 誤判觸發(fā)時(shí)機(jī)：query/params 改變不一定會(huì)銷毀組件

• 同一路由下只改 query（如 ?tabname=tuan）常常是復(fù)用組件，不會(huì)重新創(chuàng)建實(shí)例。
• 這時(shí)通常不會(huì)觸發(fā)你期待的“進(jìn)入新頁(yè)面”邏輯，應(yīng)該用：

• watch($route) 或 watch(() => $route.query.xxx)
• beforeRouteUpdate

• 易錯(cuò)點(diǎn)：把初始化邏輯只寫在 created，導(dǎo)致切 query 后不刷新數(shù)據(jù)。

4. 忽略守衛(wèi)層級(jí)順序?qū)е屡袛嘀貜?fù)或沖突

• 常見(jiàn)順序理解：全局前置 beforeEach -> 路由獨(dú)享 beforeEnter -> 組件內(nèi) beforeRouteEnter。
• 易錯(cuò)點(diǎn)：同一鑒權(quán)邏輯在三層都寫，維護(hù)困難且可能互相覆蓋重定向。
• 建議：全局管“通用規(guī)則”，路由獨(dú)享管“頁(yè)面特例”，組件守衛(wèi)管“組件狀態(tài)”。

5. 在守衛(wèi)里忘記放行

• Vue Router 3 常見(jiàn)問(wèn)題：調(diào)用了守衛(wèi)卻沒(méi) next()，頁(yè)面卡死。
• Vue Router 4 則常見(jiàn)返回值寫錯(cuò)（應(yīng)返回 true/false/redirect）。
• 易錯(cuò)點(diǎn)：分支多時(shí)有漏掉的分支沒(méi)放行。

6. 異步邏輯沒(méi)處理好，造成閃跳或重復(fù)跳轉(zhuǎn)

• 守衛(wèi)里發(fā)請(qǐng)求要注意異常分支。
• 易錯(cuò)點(diǎn)：請(qǐng)求失敗后既沒(méi)中斷也沒(méi)降級(jí)，出現(xiàn)空白頁(yè)或循環(huán)跳轉(zhuǎn)。
• 建議：統(tǒng)一兜底，失敗時(shí)給明確去向（登錄頁(yè)/錯(cuò)誤頁(yè)）。

7. 組件離開(kāi)清理不徹底，導(dǎo)致“臟狀態(tài)”回流

• 比如 Vuex 里的彈窗狀態(tài)、篩選條件、臨時(shí)編輯數(shù)據(jù)沒(méi)清。
• 你的項(xiàng)目就是典型正確示例：團(tuán)課頁(yè)在 beforeRouteLeave 里先關(guān)閉預(yù)約管理彈窗，再 next()，避免切走后狀態(tài)殘留。

8. 誤用 beforeEnter 處理組件內(nèi)部 tab 行為

• /schedule/index?tabname=tuan 這種通常是同一路由容器內(nèi)切換。
• beforeEnter 只在進(jìn)入該路由記錄時(shí)觸發(fā)，不是為組件內(nèi)部 tab 切換設(shè)計(jì)的。
• 這種場(chǎng)景應(yīng)在組件里處理 query 到狀態(tài)映射，必要時(shí)配合 beforeRouteUpdate 或 watcher。

9. 把“權(quán)限控制”和“UI 展示控制”混在一起

• 權(quán)限控制應(yīng)在守衛(wèi)/路由層（是否允許進(jìn)入）。
• UI 展示控制應(yīng)在組件層（是否展示按鈕、tab、操作項(xiàng)）。
• 易錯(cuò)點(diǎn)：只隱藏按鈕不做路由校驗(yàn)，用戶仍可直接輸 URL 訪問(wèn)。

10. 不區(qū)分“路由守衛(wèi)”與“生命周期鉤子”

• 守衛(wèi)解決“是否允許這次導(dǎo)航、導(dǎo)航前后做什么”。
• 生命周期解決“組件創(chuàng)建/更新/銷毀時(shí)做什么”。
• 易錯(cuò)點(diǎn)：把導(dǎo)航問(wèn)題放在 mounted 里，導(dǎo)致先渲染后跳轉(zhuǎn)，體驗(yàn)差。

實(shí)戰(zhàn)記憶口訣

• 進(jìn)頁(yè)面攔截：beforeEnter / beforeEach
• 組件創(chuàng)建前：beforeRouteEnter（無(wú) this，用 next(vm=>...)）
• 同組件路由變化：beforeRouteUpdate
• 離開(kāi)組件收尾：beforeRouteLeave

路由守衛(wèi)最常見(jiàn)誤區(qū)不是“不會(huì)寫”，而是“寫在了錯(cuò)誤層級(jí)和錯(cuò)誤時(shí)機(jī)”。
先判斷你要解決的是“路由進(jìn)入權(quán)限”“組件復(fù)用更新”還是“離開(kāi)清理”，再選守衛(wèi)，問(wèn)題會(huì)少一大半。

到此這篇關(guān)于vue路由守衛(wèi)易錯(cuò)點(diǎn)的文章就介紹到這了,更多相關(guān)vue路由守衛(wèi)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論