vue-router有幾個鉤子

有7個鉤子：1、beforeEach；2、beforeResolve；3、afterEach；4、beforeEnter；5、beforeRouteEnter；6、beforeRouteUpdate；7、beforeRouteLeave。

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

vue-router 有幾個鉤子函數？具體是什麼及執行流程是怎樣的？

先上心智圖。

分析

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

引用官網的話

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

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

也就是：全域守衛、路由守衛、元件守衛。

程式碼示範環境建構

先簡單搭建環境

index.js

/*
 * @Description:一尾流莺
 * @Date: 2021-03-21 16:17:56
 * @LastEditTime: 2021-07-18 15:14:42
 * @FilePath: \vite-project-js\src\router\index.js
 */

import { createRouter, createWebHashHistory } from 'vue-router';

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

main .js

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

頁面A

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

頁面B

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

頁面C

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

通用元件

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

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

全域守衛

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

beforeEach

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

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

參數

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

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

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

next（）方法的幾種情況

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

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

傳回值

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

定義多個守衛

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

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

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

beforeResolve

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

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

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

回调参数，返回值和 beforeEach 一样。也可以定义多个全局解析守卫。

afterEach

全局后置钩子，它发生在路由跳转完成后，beforeEach 和 beforeResolve 之后，beforeRouteEnter（组件内守卫）之前。它同样在 每次导航 时都会触发。

通过 router.afterEach 注册一个全局后置钩子。

这个钩子的两个参数和 beforeEach 中的 to 和 from 一样。然而和其它全局钩子不同的是，这些钩子不会接受 next 函数，也不会改变导航本身。

路由守卫

顾名思义，就是跟路由相关的钩子，我们的路由守卫只有一个，就是 beforeEnter。

beforeEnter

需要在路由配置上定义 beforeEnter 守卫，此守卫只在进入路由时触发，在 beforeEach 之后紧随执行，不会在 params、query 或 hash 改变时触发。

beforeEnter 路由守卫的参数是 to、from、next ，同 beforeEach 一样。

组件守卫

顾名思义，是定义在路由组件内部的守卫。

beforeRouteEnter

路由进入组件之前调用，该钩子在全局守卫 beforeEach 和路由守卫 beforeEnter 之后，全局 beforeResolve 和全局 afterEach 之前调用。

参数包括 to，from，next。

该守卫内访问不到组件的实例，也就是 this 为 undefined，也就是他在 beforeCreate 生命周期前触发。

beforeRouteUpdate

对于 beforeRouteUpdate 来说，this 已经可用了，所以给 next 传递回调就没有必要了。

beforeRouteLeave

对于 beforeRouteLeave 来说，this 已经可用了，所以给 next 传递回调就没有必要了。

总结

完整的导航解析流程

• 导航被触发。

• 在失活的组件里调用 beforeRouteLeave 守卫。

• 调用全局的 beforeEach 守卫。

• 在重用的组件里调用 beforeRouteUpdate 守卫。

• 在路由配置里调用 beforeEnter。

• 解析异步路由组件。

• 在被激活的组件里调用 beforeRouteEnter。

• 调用全局的 beforeResolve 守卫。

• 导航被确认。

• 调用全局的 afterEach 钩子。

• 触发 DOM 更新。

• 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

上面是官方给出的答案，现在我们用流程图来直观的展示一下。

【相关推荐：《vue.js教程》】

以上是vue-router有幾個鉤子的詳細內容。更多資訊請關注PHP中文網其他相關文章！