【快速入門Vue系列】第三十四篇:全域性守衛和路由獨享守衛(導航守衛篇)

語言: CN / TW / HK

theme: qklhk-chocolate

VueRouter_導航守衛

導航:路由正在發生變化。

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

導航守衛被分成三種:全域性的、單個路由獨享的、元件內的。

全域性守衛

是指路由例項上直接操作的鉤子函式,觸發路由就會觸發這些鉤子函式。

vue-router全域性有三個守衛

  • router.beforeEach :全域性前置守衛,進入路由之前
  • router.beforeResolve :全域性解析守衛,在beforeRouteEnter呼叫之後呼叫(不常用)
  • router.afterEach :全域性後置鉤子,進入路由之後

全域性前置守衛 beforeEach

在路由跳轉前觸發,一般被用於登入驗證。

```js const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => { // ... }) ```

引數說明:

  • to 目標路由物件

  • from 即將要離開的路由物件

  • next 三個引數中最重要的引數。

    • 必須呼叫next(),才能繼續往下執行一個鉤子,否則路由跳轉會停止
    • 若要中斷當前的導航,可以呼叫next(false)。
    • 可以使用next跳轉到一個不同的地址。終端當前導航,進入一個新的導航。next引數值和$routet.push一致。
    • next(error)。2.4+,如果傳入的引數是一個Error例項,則導航會被終止,且該錯誤會被傳遞給router.onError() 註冊過的回撥。

全域性解析守衛 beforeResolve

和boforeEach類似,路由跳轉前觸發。

和beforeEach的區別:在導航被確認之前,同時在所有元件內守衛和非同步路由元件被解析之後,解析守衛就被呼叫。

```js const router = new VueRouter({ ... })

router.beforeResolve((to, from, next) => { // ... }) ```

全域性後置鉤子 afterEach

和beforeEach相反,路由跳轉完成後觸發。

```js const router = new VueRouter({ ... })

router.afterEach((to, from) => { // ... }) ```

路由獨享守衛

是指在單個路由配置的時候也可以設定的鉤子函式。

beforeEnter

和beforeEach完全相同,如果都設定則在beforeEach之後緊隨執行。

js const router = new VueRouter({ routes: [ { path: '/home', component: Home, beforeEnter: (to, from, next) => { // ... } } ] })

最後

如果對您有幫助,希望能給個👍評論/收藏/三連!

博主為人老實,無償解答問題哦❤

「其他文章」