資訊專(zhuān)欄INFORMATION COLUMN
摘要：簡(jiǎn)介主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。判斷必要操作是否進(jìn)行沒(méi)進(jìn)行的話中斷跳轉(zhuǎn)。進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是確認(rèn)的。中斷當(dāng)前的導(dǎo)航。如果傳入的參數(shù)是一個(gè)實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給注冊(cè)過(guò)的回調(diào)。
簡(jiǎn)介
主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。
例如判斷登錄信息：沒(méi)登錄全部跳到登錄頁(yè)。判斷必要操作是否進(jìn)行沒(méi)進(jìn)行的話中斷跳轉(zhuǎn)。
分為三大類(lèi)：全局守衛(wèi)、路由守衛(wèi)、組件守衛(wèi)
全局守衛(wèi)1. beforeEach 2. beforeResolve 3. afterEach路由守衛(wèi)
1. beforeEnter組件守衛(wèi)
1. beforeRouteEnter
// 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
// 不！能！獲取組件實(shí)例 `this`
// 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒(méi)被創(chuàng)建
雖然無(wú)法直接獲取組件實(shí)力
但是我們可以通過(guò)next參數(shù)的回調(diào)函數(shù)獲取到當(dāng)前實(shí)例進(jìn)行操作
beforeRouteEnter: (to, from, next) => {
next((vm) => {
//vm就是當(dāng)前組件實(shí)例
});
}
2. beforeRouteUpdate
// 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
// 舉例來(lái)說(shuō)，對(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)用。
// 可以訪問(wèn)組件實(shí)例 `this`
3. beforeRouteLeave
// 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用
// 可以訪問(wèn)組件實(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)航正要離開(kāi)的路由
next: Function: 一定要調(diào)用該方法來(lái) 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è)過(guò)的回調(diào)。
運(yùn)行機(jī)制
上圖（別問(wèn)我圖是誰(shuí)）：（流程圖通過(guò)https://www.processon.com 進(jìn)行繪制）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90393.html
摘要：全局前置守衛(wèi)使用注冊(cè)一個(gè)全局前置守衛(wèi)。守衛(wèi)是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有守衛(wèi)完之前一直處于等待中。中斷當(dāng)前的導(dǎo)航。不過(guò)可以通過(guò)傳一個(gè)回調(diào)函數(shù)來(lái)訪問(wèn)組建實(shí)例。注意是支持傳遞回調(diào)的唯一守衛(wèi)。用創(chuàng)建好的實(shí)例調(diào)用守衛(wèi)中傳給的回調(diào)函數(shù)。 全局前置守衛(wèi) 使用router.beforeEach注冊(cè)一個(gè)全局前置守衛(wèi)。 const router = new VueRouter({...}) router...
摘要：簡(jiǎn)單介紹主人公字段介紹我們稱(chēng)每個(gè)路由對(duì)象為路由記錄，路由記錄可以嵌套。所以到我們匹配到一個(gè)路有的時(shí)候他有可能有多條路由記錄。 路由元信息 為什么會(huì)有這個(gè)東西呢？我們知道我們?yōu)g覽一些網(wǎng)站的時(shí)候有需要驗(yàn)證登錄的也有不需要驗(yàn)證登錄的，如果所有頁(yè)面都在做成驗(yàn)證登錄的話對(duì)于用戶的體驗(yàn)也是極差的，所以這個(gè)時(shí)候路由元信息就起到了很大的作用。 簡(jiǎn)單介紹 主人公：meta字段 介紹：我們稱(chēng)每個(gè)路由對(duì)象為...
摘要：在失活的組件里調(diào)用離開(kāi)守衛(wèi)。調(diào)用全局的守衛(wèi)。用創(chuàng)建好的實(shí)例調(diào)用守衛(wèi)中傳給的回調(diào)函數(shù)。路由元信息定義路由的時(shí)候可以配置字段 vue-router1 router-link 導(dǎo)航到不同組件 Go to Foo Go to Bar 定義路由const routes = [ { path: /foo, component: Foo }, { path: /bar, component: B...
摘要：當(dāng)對(duì)應(yīng)的路由匹配成功，將自動(dòng)設(shè)置屬性值。執(zhí)行效果依賴方法的調(diào)用參數(shù)。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。滾動(dòng)行為只在支持的瀏覽器中可用。當(dāng)且僅當(dāng)導(dǎo)航通過(guò)瀏覽器的前進(jìn)后退按鈕觸發(fā)時(shí)才可用。 當(dāng) 對(duì)應(yīng)的路由匹配成功，將自動(dòng)設(shè)置 class 屬性值 .router-link-active 。 默認(rèn) hash 模式：使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)...
摘要：可以從其他文件進(jìn)來(lái)定義路由每個(gè)路由應(yīng)該映射一個(gè)組件。其中可以是通過(guò)創(chuàng)建的組件構(gòu)造器，或者，只是一個(gè)組件配置對(duì)象。我們晚點(diǎn)再討論嵌套路由。通過(guò)訪問(wèn)組件實(shí)例更新的時(shí)候路由離開(kāi)以通過(guò)來(lái)取消。路由懶加載參考路由懶加載 起步 HTML Hello App! Go to Foo Go to Bar JavaS...
閱讀 1014·2019-08-30 15:55
閱讀 3456·2019-08-30 13:10
閱讀 1282·2019-08-29 18:45
閱讀 2363·2019-08-29 16:25
閱讀 2123·2019-08-29 15:13
閱讀 2435·2019-08-29 11:29
閱讀 566·2019-08-26 17:34
閱讀 1503·2019-08-26 13:57
