VueRouter導航守衛用法詳解

來源：懂視網責編：小采時間：2020-11-27 22:23:06

VueRouter導航守衛用法詳解

VueRouter導航守衛用法詳解:簡介主要用來通過跳轉或取消的方式守衛導航。例如判斷登錄信息：沒登錄全部跳到登錄頁。判斷必要操作是否進行沒進行的話中斷跳轉。分為三大類：全局守衛、路由守衛、組件守衛全局守衛 beforeEach beforeResolve afterEach 路由守衛 bef

推薦度：

點擊下載本文 文檔為doc格式

導讀VueRouter導航守衛用法詳解:簡介主要用來通過跳轉或取消的方式守衛導航。例如判斷登錄信息：沒登錄全部跳到登錄頁。判斷必要操作是否進行沒進行的話中斷跳轉。分為三大類：全局守衛、路由守衛、組件守衛全局守衛 beforeEach beforeResolve afterEach 路由守衛 bef

簡介

主要用來通過跳轉或取消的方式守衛導航。

例如判斷登錄信息：沒登錄全部跳到登錄頁。判斷必要操作是否進行沒進行的話中斷跳轉。

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

全局守衛

beforeEach
beforeResolve
afterEach

路由守衛

beforeEnter

組件守衛

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

運行機制