VueRouter進階（1）-導航守衛

renweihub 發布于2019-08-21 18:22 / 1679人閱讀

摘要：簡介主要用來通過跳轉或取消的方式守衛導航。判斷必要操作是否進行沒進行的話中斷跳轉。進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是確認的。中斷當前的導航。如果傳入的參數是一個實例，則導航會被終止且該錯誤會被傳遞給注冊過的回調。

簡介

主要用來通過跳轉或取消的方式守衛導航。
例如判斷登錄信息：沒登錄全部跳到登錄頁。判斷必要操作是否進行沒進行的話中斷跳轉。

分為三大類：全局守衛、路由守衛、組件守衛

全局守衛

 1. beforeEach
 2. beforeResolve
 3. afterEach

路由守衛

1. beforeEnter

組件守衛

 1. beforeRouteEnter
    // 在渲染該組件的對應路由被 confirm 前調用
    // 不！能！獲取組件實例 `this`
    // 因為當守衛執行前，組件實例還沒被創建
    雖然無法直接獲取組件實力
    但是我們可以通過next參數的回調函數獲取到當前實例進行操作
    beforeRouteEnter: (to, from, next) => {
        next((vm) => {
            //vm就是當前組件實例
        });
    }
 2. beforeRouteUpdate
    // 在當前路由改變，但是該組件被復用時調用
    // 舉例來說，對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。
    // 可以訪問組件實例 `this`
 3. beforeRouteLeave
    // 導航離開該組件的對應路由時調用
    // 可以訪問組件實例 `this`

參數介紹

這些導航守衛涉及到的參數：to、from、next
除了全局守衛的afterEach只有to和from外其余都有三個參數

（摘抄自官網）
to: Route: 即將要進入的目標 路由對象

from: Route: 當前導航正要離開的路由

next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

    next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
    next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應的地址。
    next("/") 或者 next({ path: "/" }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。
    next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調。

運行機制

上圖（別問我圖是誰）：（流程圖通過https://www.processon.com 進行繪制）

云服務器 GPU云服務器 VueRouter Vue_VueRouter 進階技巧 -進階

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90393.html

Vue-router進階：導航守衛

摘要：全局前置守衛使用注冊一個全局前置守衛。守衛是異步解析執行，此時導航在所有守衛完之前一直處于等待中。中斷當前的導航。不過可以通過傳一個回調函數來訪問組建實例。注意是支持傳遞回調的唯一守衛。用創建好的實例調用守衛中傳給的回調函數。全局前置守衛使用router.beforeEach注冊一個全局前置守衛。 const router = new VueRouter({...}) router...

tommego 2019-08-23 15:20 評論0 收藏0
VueRouter進階（2）-路由元信息

摘要：簡單介紹主人公字段介紹我們稱每個路由對象為路由記錄，路由記錄可以嵌套。所以到我們匹配到一個路有的時候他有可能有多條路由記錄。路由元信息為什么會有這個東西呢？我們知道我們瀏覽一些網站的時候有需要驗證登錄的也有不需要驗證登錄的，如果所有頁面都在做成驗證登錄的話對于用戶的體驗也是極差的，所以這個時候路由元信息就起到了很大的作用。簡單介紹主人公：meta字段介紹：我們稱每個路由對象為...

CoXie 2019-08-21 18:24 評論0 收藏0
19/3/31學習筆記

摘要：在失活的組件里調用離開守衛。調用全局的守衛。用創建好的實例調用守衛中傳給的回調函數。路由元信息定義路由的時候可以配置字段 vue-router1 router-link 導航到不同組件 Go to Foo Go to Bar 定義路由const routes = [ { path: /foo, component: Foo }, { path: /bar, component: B...

UnixAgain 2019-08-26 13:39 評論0 收藏0
VueRouter

摘要：當對應的路由匹配成功，將自動設置屬性值。執行效果依賴方法的調用參數。而這個鉤子就會在這個情況下被調用。滾動行為只在支持的瀏覽器中可用。當且僅當導航通過瀏覽器的前進后退按鈕觸發時才可用。當對應的路由匹配成功，將自動設置 class 屬性值 .router-link-active 。默認 hash 模式：使用 URL 的 hash 來模擬一個完整的 URL，于是當 URL 改變時...

劉厚水 2019-08-23 18:08 評論0 收藏0
Vue.js路由管理器 Vue Router

摘要：可以從其他文件進來定義路由每個路由應該映射一個組件。其中可以是通過創建的組件構造器，或者，只是一個組件配置對象。我們晚點再討論嵌套路由。通過訪問組件實例更新的時候路由離開以通過來取消。路由懶加載參考路由懶加載起步 HTML Hello App! Go to Foo Go to Bar JavaS...

崔曉明 2019-08-23 10:57 評論0 收藏0