VueRouter導(dǎo)航守衛(wèi)用法詳解
簡(jiǎn)介
主要用來通過跳轉(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 // 在渲染該組件的對(duì)應(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)用 // 舉例來說,對(duì)于一個(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)航離開該組件的對(duì)應(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) 路由對(duì)象 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 路由對(duì)應(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() 注冊(cè)過的回調(diào)。
運(yùn)行機(jī)制
以上就是本次給大家介紹的關(guān)于VueRouter導(dǎo)航守衛(wèi)的全部知識(shí),希望我們整理的內(nèi)容對(duì)你有用,感謝你對(duì)腳本之家的支持。
相關(guān)文章
vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式
這篇文章主要介紹了vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決
這篇文章主要介紹了vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12使用vue編寫一個(gè)點(diǎn)擊數(shù)字計(jì)時(shí)小游戲
這篇文章主要為大家詳細(xì)介紹了使用vue編寫一個(gè)點(diǎn)擊數(shù)字計(jì)時(shí)小游戲,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08vue2.0使用v-for循環(huán)制作多級(jí)嵌套菜單欄
這篇文章主要介紹了vue2.0制作多級(jí)嵌套菜單欄,主要使用v-for循環(huán)生成一個(gè)多級(jí)嵌套菜單欄,這個(gè)方法應(yīng)用非常廣泛,需要的朋友可以參考下2018-06-06