更新時(shí)間:2023-03-28 來源:黑馬程序員 瀏覽量:
Vue 路由守衛(wèi)是在 Vue Router 中提供的一種功能,它允許您在導(dǎo)航到某個(gè)路由前、路由變化時(shí)或?qū)Ш诫x開某個(gè)路由時(shí)執(zhí)行代碼。Vue 路由守衛(wèi)提供了以下幾種類型:
router.beforeEach 在進(jìn)入路由前執(zhí)行的鉤子函數(shù),它會接收三個(gè)參數(shù):to(要進(jìn)入的路由對象)、from(當(dāng)前導(dǎo)航正要離開的路由對象)和 next(必須調(diào)用該函數(shù)才能進(jìn)入下一個(gè)鉤子)。
router.beforeResolve 在路由解析之前執(zhí)行的鉤子函數(shù),也會接收 to、from 和 next 參數(shù)。與 beforeEach 的區(qū)別在于,該守衛(wèi)在全局守衛(wèi)中被最后調(diào)用,因此它在所有路由組件內(nèi)的守衛(wèi)和異步路由組件被解析之后才被調(diào)用。
router.afterEach 在進(jìn)入路由后執(zhí)行的鉤子函數(shù),它不接收 next 函數(shù),也不能改變導(dǎo)航。
beforeEnter 在路由配置中定義的鉤子函數(shù),它會在路由被激活之前調(diào)用。它和全局前置守衛(wèi)的參數(shù)一樣,但是只對該路由生效。
·beforeRouteEnter:在路由進(jìn)入時(shí)異步加載組件前調(diào)用。
·beforeRouteUpdate:在當(dāng)前路由改變,但是該組件被復(fù)用時(shí)調(diào)用(例如,從 /users/1 導(dǎo)航到 /users/2 時(shí))。
·beforeRouteLeave:在離開當(dāng)前路由時(shí)調(diào)用。
要設(shè)置路由守衛(wèi),可以在路由實(shí)例的配置對象中添加相應(yīng)的屬性。例如,設(shè)置全局前置守衛(wèi)可以這樣寫:
const router = new VueRouter({ routes: [...], }) router.beforeEach((to, from, next) => { // ... })
使用場景包括但不限于:
1.驗(yàn)證用戶權(quán)限:在進(jìn)入某些頁面之前檢查用戶是否已登錄或是否有權(quán)限訪問該頁面。
2.加載數(shù)據(jù):在進(jìn)入頁面前加載必要的數(shù)據(jù),例如在組件內(nèi)使用 beforeRouteEnter 鉤子函數(shù)異步獲取數(shù)據(jù)。
3.路由重定向:在進(jìn)入某些頁面時(shí)需要重定向到另一個(gè)頁面,例如在全局前置守衛(wèi)中檢查用戶是否已登錄并將未登錄用戶重定向到登錄頁面。
4.路由攔截:在某些情況下需要取消路由導(dǎo)航,例如在組件內(nèi)使用 beforeRouteLeave 鉤子函數(shù)防止用戶誤操作離開當(dāng)前頁面。
【AI設(shè)計(jì)】北京143期畢業(yè)僅36天,全員拿下高薪offer!黑馬AI設(shè)計(jì)連續(xù)6期100%高薪就業(yè)
2025-09-19【跨境電商運(yùn)營】深圳跨境電商運(yùn)營畢業(yè)22個(gè)工作日,就業(yè)率91%+,最高薪資達(dá)13500元
2025-09-19【AI運(yùn)維】鄭州運(yùn)維1期就業(yè)班,畢業(yè)14個(gè)工作日,班級93%同學(xué)已拿到Offer, 一線均薪資 1W+
2025-09-19【AI鴻蒙開發(fā)】上海校區(qū)AI鴻蒙開發(fā)4期5期,距離畢業(yè)21天,就業(yè)率91%,平均薪資14046元
2025-09-19【AI大模型開發(fā)-Python】畢業(yè)33個(gè)工作日,就業(yè)率已達(dá)到94.55%,班均薪資20763元
2025-09-19【AI智能應(yīng)用開發(fā)-Java】畢業(yè)當(dāng)天offer率91%,薪資1W+占比54.2%,班級均薪12k+
2025-09-19