vue路由鉤子函數有幾種？分別是什麼？

青灯夜游

發布： 2021-10-27 17:51:55

原創

8605 人瀏覽過

vue路由鉤子函數有2種，分別為：1、全域守衛（全域鉤子函數），指的是「index.js」中的router物件；2、路由守衛（針對單一路由鉤子函數）；3、組件守衛（組件級鉤子函數），是定義在路由組件內部的守衛。

vue路由鉤子函數有幾種？分別是什麼？

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

vue-router 的 鉤子函數 ，其實說的就是 導航守衛 。

引用官網的話

「導航」表示路由正在改變。

vue-router 提供的導航守衛主要用來透過跳轉或取消的方式守衛導航 。有多種機會植入路由導航過程中：全局的, 單一路由獨享的, 或組件級的。

也就是：全域守衛（全域鉤子函數）、路由守衛（針對單一路由鉤子函數）、元件守衛（元件級鉤子函數）。

程式碼示範環境建置

先簡單搭建環境

index.js

import { createRouter, createWebHashHistory } from &#39;vue-router&#39;;

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: &#39;/a&#39;,
      component: () => import(&#39;../components/A.vue&#39;),
    },
    {
      path: &#39;/b&#39;,
      component: () => import(&#39;../components/B.vue&#39;),
    },
    {
      path: &#39;/c&#39;,
      component: () => import(&#39;../components/C.vue&#39;),
    },
  ],
});
export default router;

登入後複製

main.js

// index.js
import router from "./router"; 
createApp(App).use(router).mount("#app");

登入後複製

頁面A

<template>
  <div>
    <h1>我是页面A啊</h1>
    <comp></comp>
  </div>
</template>

登入後複製

#頁面B

<template>
  <div>
    <h1>我是页面B啊</h1>
    <comp></comp>
  </div>
</template>

登入後複製

#頁面C

<template>
  <div>
    <h1>我是页面C啊</h1>
    <comp></comp>
  </div>
</template>

登入後複製

通用元件

<template>
  <div>我是公用组件啊</div>
</template>

登入後複製

目前頁面是這樣的，有點醜，湊活看吧，咱也不是來學習css 的

vue路由鉤子函數有幾種？分別是什麼？

#全域守衛

顧名思義，是要定義在全域的，也就是我們index.js 中的router 物件。

beforeEach

全域前置守衛，在路由跳轉前觸發，它在 每次導航 時都會觸發。

透過 router.beforeEach 註冊一個全域前守衛。

vue路由鉤子函數有幾種？分別是什麼？

參數

beforeEach 全域前置守衛接收三個參數

to : Route: 即將進入的目標路由物件
from: Route: 目前導覽正要離開的路由物件
next: Function: 一定要呼叫該方法不然會阻塞路由。

注意： next 參數可以不添加，但是一旦添加，則必須呼叫一次，否則路由跳轉等會停止。

next（）方法的幾種情況

#next(): 進行管道中的下一個鉤子。
next(false): 中斷目前的導航。回到 from 路由對應的位址。
next('/') 或next({ path: '/' }): 跳到一個不同的位址，可傳遞的參數與router.push 中選項一致。
next(error): 導覽終止，且該錯誤會傳遞至 router.onError() 註冊過的回呼。

我們把前兩個參數印出來看一下，裡麵包含路徑，參數，元資訊等內容。

vue路由鉤子函數有幾種？分別是什麼？

傳回值

false：取消目前的導覽。
null，undefined，true或直接return：呼叫下一個導航守衛。

定義多個守衛

全域前置守衛可以定義多個，依照建立順序呼叫。在所有守衛完成之前導航一直處於等待中。

下面這個例子我們就定義了兩個 beforeEach 全域前置守衛。可以看到，只有在兩秒以後分別列印出兩個日誌後才進行頁面的跳躍。

vue路由鉤子函數有幾種？分別是什麼？

除了beforeEach 全域前置守衛之外，其他的全域守衛都可以定義多個，並且在所有守衛完成之前導航一直處於等待中，其他的鉤子函數就不進行演示了。

beforeResolve

全域解析守衛，在路由跳轉前，所有元件內守衛 和非同步路由元件 被解析之後觸發，它同樣在每次導航 時都會觸發。

透過 router.beforeResolve 註冊一個全域解析守衛。

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

登入後複製

回呼參數，傳回值和 beforeEach 一樣。也可以定義多個全域解析守衛。

afterEach

全域後置鉤子，它發生在路由跳轉完成後，beforeEach 和beforeResolve 之後，beforeRouteEnter（元件內守衛）之前。它同樣在 每次導航 時都會觸發。

透過 router.afterEach 註冊一個全域後置鉤子。

vue路由鉤子函數有幾種？分別是什麼？

這個鉤子的兩個參數和 beforeEach 中的 to 和 from 一樣。然而和其它全局鉤子不同的是，這些鉤子不會接受 next 函數，也不會改變導航本身。

路由守衛

顧名思義，就是跟路由相關的鉤子，我們的路由守衛只有一個，就是 beforeEnter。

beforeEnter

需要在路由配置上定義beforeEnter 守衛，此守衛只在進入路由時觸發，在beforeEach 之後緊接著執行，不會在params、query 或hash 改變時觸發。

vue路由鉤子函數有幾種？分別是什麼？

beforeEnter 路由守衛的參數是to、from、next ，同beforeEach 一樣。

元件守衛

顧名思義，是定義在路由元件內部的守衛。

beforeRouteEnter

vue路由鉤子函數有幾種？分別是什麼？

路由進入元件之前調用，該鉤子在全域守衛beforeEach 和路由守衛beforeEnter之後，全域beforeResolve 和全域afterEach 之前呼叫。

參數包含 to，from#，next。

該守衛內存取不到元件的實例，也就是 this 為 undefined，也就是他在 beforeCreate 生命週期前觸發。

beforeRouteUpdate

vue路由鉤子函數有幾種？分別是什麼？

對於beforeRouteUpdate 來說，this 已經可用了，所以給next 傳遞回呼就沒有必要了。

beforeRouteLeave

vue路由鉤子函數有幾種？分別是什麼？

對於beforeRouteLeave 來說，this 已經可用了，所以給next 傳遞回呼就沒有必要了。

總結

完整的導航解析流程

導航被觸發。

在失活的元件裡呼叫 beforeRouteLeave 守衛。

呼叫全域的 beforeEach 守衛。

在重複使用的元件裡呼叫 beforeRouteUpdate 守衛。

在路由配置裡呼叫 beforeEnter。

解析非同步路由元件。

在被啟動的元件裡呼叫 beforeRouteEnter。

呼叫全域的 beforeResolve 守衛。

導航被確認。

呼叫全域的 afterEach 鉤子。

觸發 DOM 更新。

呼叫 beforeRouteEnter 守衛中傳給 next 的回呼函數，建立好的元件實例會作為回呼函數的參數傳入。