簡介
10年積累的成都網(wǎng)站建設(shè)、成都做網(wǎng)站經(jīng)驗(yàn),可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你,你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程,更有龍亭免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。
例如判斷登錄信息:沒登錄全部跳到登錄頁。判斷必要操作是否進(jìn)行沒進(jìn)行的話中斷跳轉(zhuǎn)。
分為三大類:全局守衛(wèi)、路由守衛(wèi)、組件守衛(wèi)
全局守衛(wèi)
beforeEach beforeResolve afterEach
路由守衛(wèi)
beforeEnter
組件守衛(wèi)
beforeRouteEnter // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用 // 不!能!獲取組件實(shí)例 `this` // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前,組件實(shí)例還沒被創(chuàng)建 雖然無法直接獲取組件實(shí)力 但是我們可以通過next參數(shù)的回調(diào)函數(shù)獲取到當(dāng)前實(shí)例進(jìn)行操作 beforeRouteEnter: (to, from, next) => { next((vm) => { //vm就是當(dāng)前組件實(shí)例 }); } beforeRouteUpdate // 在當(dāng)前路由改變,但是該組件被復(fù)用時(shí)調(diào)用 // 舉例來說,對于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候, // 由于會(huì)渲染同樣的 Foo 組件,因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。 // 可以訪問組件實(shí)例 `this` beforeRouteLeave // 導(dǎo)航離開該組件的對應(yīng)路由時(shí)調(diào)用 // 可以訪問組件實(shí)例 `this`
參數(shù)介紹
這些導(dǎo)航守衛(wèi)涉及到的參數(shù):to、from、next
除了全局守衛(wèi)的afterEach只有to和from外其余都有三個(gè)參數(shù)
(摘抄自官網(wǎng)) to: Route: 即將要進(jìn)入的目標(biāo) 路由對象 from: Route: 當(dāng)前導(dǎo)航正要離開的路由 next: Function: 一定要調(diào)用該方法來 resolve 這個(gè)鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。 next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了,則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)。 next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了(可能是用戶手動(dòng)或者瀏覽器后退按鈕),那么 URL 地址會(huì)重置到 from 路由對應(yīng)的地址。 next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷,然后進(jìn)行一個(gè)新的導(dǎo)航。 next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個(gè) Error 實(shí)例,則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給 router.onError() 注冊過的回調(diào)。
運(yùn)行機(jī)制
以上就是本次給大家介紹的關(guān)于VueRouter導(dǎo)航守衛(wèi)的全部知識(shí),希望我們整理的內(nèi)容對你有用,感謝你對創(chuàng)新互聯(lián)的支持。