VueRouter導(dǎo)航守衛(wèi)用法詳解

更新時間：2017年12月25日 08:47:11 投稿：laozhang

這篇文章主要介紹了VueRouter導(dǎo)航守衛(wèi)的詳細用法以及分類介紹，有興趣的朋友學(xué)習(xí)參考下吧。

簡介

主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。

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

分為三大類：全局守衛(wèi)、路由守衛(wèi)、組件守衛(wèi)

全局守衛(wèi)

beforeEach
beforeResolve
afterEach

路由守衛(wèi)

beforeEnter

組件守衛(wèi)

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)前組件實例
    });
  }
beforeRouteUpdate
  // 在當(dāng)前路由改變，但是該組件被復(fù)用時調(diào)用
  // 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，
  // 由于會渲染同樣的 Foo 組件，因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用。
  // 可以訪問組件實例 `this`
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: 即將要進入的目標(biāo) 路由對象
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)。

運行機制