詳解VueRouter進(jìn)階之導(dǎo)航鉤子和路由元信息
導(dǎo)航鉤子
vue-router 提供的導(dǎo)航鉤子主要用來攔截導(dǎo)航,讓它完成跳轉(zhuǎn)或取消。有多種方式可以在路由導(dǎo)航發(fā)生時(shí)執(zhí)行鉤子:全局的, 單個(gè)路由獨(dú)享的, 或者組件級(jí)的。
全局鉤子
你可以使用 router.beforeEach 注冊(cè)一個(gè)全局的 before 鉤子:
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })
當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí),全局的 before 鉤子按照創(chuàng)建順序調(diào)用。鉤子是異步解析執(zhí)行,此時(shí)導(dǎo)航在所有鉤子 resolve 完之前一直處于 等待中。
每個(gè)鉤子方法接收三個(gè)參數(shù):
- 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)航。
確保要調(diào)用 next 方法,否則鉤子就不會(huì)被 resolved。
同樣可以注冊(cè)一個(gè)全局的 after 鉤子,不過它不像 before 鉤子那樣,after 鉤子沒有 next 方法,不能改變導(dǎo)航:
router.afterEach(route => { // ... })
你可以在路由配置上直接定義 beforeEnter 鉤子:
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] })
這些鉤子與全局 before 鉤子的方法參數(shù)是一樣的。
組件內(nèi)的鉤子
最后,你可以在路由組件內(nèi)直接定義以下路由導(dǎo)航鉤子:
beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用 // 不!能!獲取組件實(shí)例 `this` // 因?yàn)楫?dāng)鉤子執(zhí)行前,組件實(shí)例還沒被創(chuàng)建 }, beforeRouteUpdate (to, from, next) { // 在當(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 (to, from, next) { // 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用 // 可以訪問組件實(shí)例 `this` } }
beforeRouteEnter 鉤子 不能 訪問 this,因?yàn)殂^子在導(dǎo)航確認(rèn)前被調(diào)用,因此即將登場的新組件還沒被創(chuàng)建。
不過,你可以通過傳一個(gè)回調(diào)給 next來訪問組件實(shí)例。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào),并且把組件實(shí)例作為回調(diào)方法的參數(shù)。
beforeRouteEnter (to, from, next) { next(vm => { // 通過 `vm` 訪問組件實(shí)例 }) }
路由元信息
你可以 在 beforeRouteLeave 中直接訪問 this。這個(gè) leave 鉤子通常用來禁止用戶在還未保存修改前突然離開。可以通過 next(false) 來取消導(dǎo)航。
定義路由的時(shí)候可以配置 meta 字段:
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta: { requiresAuth: true } } ] } ] })
那么如何訪問這個(gè) meta 字段呢?
首先,我們稱呼 routes 配置中的每個(gè)路由對(duì)象為 路由記錄。路由記錄可以是嵌套的,因此,當(dāng)一個(gè)路由匹配成功后,他可能匹配多個(gè)路由記錄
例如,根據(jù)上面的路由配置,/foo/bar 這個(gè) URL 將會(huì)匹配父路由記錄以及子路由記錄。
一個(gè)路由匹配到的所有路由記錄會(huì)暴露為 $route 對(duì)象(還有在導(dǎo)航鉤子中的 route 對(duì)象)的 $route.matched 數(shù)組。因此,我們需要遍歷 $route.matched 來檢查路由記錄中的 meta 字段。
下面例子展示在全局導(dǎo)航鉤子中檢查 meta 字段:
router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { // this route requires auth, check if logged in // if not, redirect to login page. if (!auth.loggedIn()) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } } else { next() // 確保一定要調(diào)用 next() } })
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue子組件內(nèi)的props對(duì)象參數(shù)配置方法
這篇文章主要介紹了?Vue?子組件內(nèi)的??props?對(duì)象里的?default?參數(shù)是如何定義Array、?Object?、或?Function?默認(rèn)值的正確寫法說明,感興趣的朋友跟隨小編一起看看吧2022-08-08解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
這篇文章主要介紹了解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03element-ui el-dialog嵌套table組件,ref問題及解決
這篇文章主要介紹了element-ui el-dialog嵌套table組件,ref問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02ElementUI中的el-dropdown傳入多參數(shù)的實(shí)現(xiàn)方法
本文主要介紹了ElementUI中的el-dropdown傳入多參數(shù)的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-12-12Vue.js實(shí)現(xiàn)開發(fā)購物車功能的方法詳解
這篇文章主要介紹了Vue.js實(shí)現(xiàn)開發(fā)購物車功能的方法,結(jié)合實(shí)例形式分析了基于vue.js開發(fā)的購物車功能相關(guān)操作步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02