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

1. 把 beforeEnter 和 beforeRouteLeave 用反

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

2. 誤以為 beforeRouteEnter 能直接拿 this

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最新評論