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