Wie viele Arten von Vue-Routing-Hook-Funktionen gibt es? Was sind die Unterschiede?

Vue verfügt über zwei Routing-Hook-Funktionen, nämlich: 1. Globaler Guard (globale Hook-Funktion), der sich auf das Router-Objekt in „index.js“ bezieht; 2. Routing-Guard (für eine einzelne Routing-Hook-Funktion); Guards (Hook-Funktionen auf Komponentenebene) sind Guards, die innerhalb von Routing-Komponenten definiert sind.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

vue-routers Hook-Funktion bezieht sich tatsächlich auf Navigation Guard. vue-router 的 钩子函数 ，其实说的就是 导航守卫 。

引用官网的话

“导航” 表示路由正在发生改变。

vue-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>我是页面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 的

全局守卫

顾名思义，是要定义在全局的，也就是我们 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

Zitat von der offiziellen Website🎜🎜🎜 „Navigation“ bedeutet, dass sich die Routenführung ändert. 🎜🎜🎜🎜Der von vue-router bereitgestellte Navigationsschutz wird hauptsächlich zum Schutz der Navigation durch Springen oder Abbrechen verwendet > . Es gibt mehrere Möglichkeiten, den Routennavigationsprozess zu integrieren: global, exklusiv für eine einzelne Route oder auf Komponentenebene. 🎜🎜🎜Das heißt: Global Guard (globale Hook-Funktion), Routing Guard (für eine einzelne Routing-Hook-Funktion), Component Guard (Hook-Funktion auf Komponentenebene). ). 🎜

Einrichtung der Code-Demonstrationsumgebung

🎜Richten Sie zunächst einfach die Umgebung ein🎜🎜index.js🎜rrreee🎜main.js🎜rrreee🎜 Seite A🎜rrreee🎜Seite B🎜rrreee🎜Seite C🎜rrreee🎜Gemeinsame Komponenten🎜rrreee🎜Die aktuelle Seite ist wie Das ist ein bisschen hässlich, schau es dir nur zum Spaß an, wir sind nicht hier, um css zu lernen 🎜🎜🎜

Global Guard

🎜Wie der Name schon sagt, ist es global definiert, also index.js in unserem code>router-Objekt. 🎜

beforeEach

🎜Globaler Frontschutz, der vor dem Routensprung ausgelöst wird, wird bei jeder Navigation ausgelöst. 🎜🎜Registrieren Sie einen globalen beforeEach-Schutz über router.beforeEach. 🎜🎜🎜

Parameter

🎜beforeEach Der globale Frontwächter empfängt drei Parameter🎜

• zu: Route: Das Zielroutenobjekt, das gleich eintreten wird li>
• from: Route: Das Routingobjekt, das die aktuelle Navigation verlassen wird
• next: Funktion: Diese Methode muss aufgerufen werden, sonst wird das Routing blockiert.

🎜Hinweis: Der Parameter next muss nicht hinzugefügt werden, aber sobald er hinzugefügt wurde, muss er einmal aufgerufen werden, andernfalls werden Sprünge usw. weitergeleitet . wird aufhören. 🎜🎜 Mehrere Fälle der next()-Methode🎜

• next(): Fahren Sie mit dem nächsten Hook in der Pipeline fort.
• next(false): Aktuelle Navigation unterbrechen. Kehren Sie zur Adresse zurück, die der Route von entspricht.
• next('/') oder next({ path: '/' }): Springe zu einer anderen Adresse. Die Parameter, die übergeben werden können, sind die gleichen wie bei router. Die Optionen in push sind die gleichen.
• next(error): Die Navigation wird beendet und der Fehler wird an den von router.onError() registrierten Callback übergeben.

🎜Lassen Sie uns die ersten beiden Parameter ausdrucken und einen Blick darauf werfen. Sie enthalten Pfade, Parameter, Metainformationen usw. 🎜🎜🎜

Rückgabewert h3>

• false: Aktuelle Navigation abbrechen.
• Null, undefiniert, wahr oder direkte Rückgabe: Rufen Sie den nächsten Navigationswächter auf.

Definieren Sie mehrere Guards

🎜Mehrere globale Frontguards können entsprechend der Erstellungsreihenfolge definiert und aufgerufen werden. Die Navigation steht noch aus, bis alle Wachen fertig sind. 🎜🎜Im folgenden Beispiel definieren wir zwei globale beforeEach Front Guards. Es ist ersichtlich, dass der Seitensprung erst erfolgt, nachdem zwei Sekunden später zwei Protokolle ausgedruckt wurden. 🎜🎜🎜🎜🎜🎜außer beforeEach Zusätzlich zum globalen Frontschutz können mehrere andere globale Schutzvorrichtungen definiert werden, und die Navigation wartet, bis alle Schutzvorrichtungen abgeschlossen sind. Andere Hook-Funktionen werden nicht demonstriert. 🎜

beforeResolve

🎜Der globale Auflösungsschutz wird vor dem Routing-Sprung ausgelöst, nachdem alle Internen Wächter und Asynchrone Routing-Komponenten analysiert wurden. Er wird auch danach ausgelöst Wird bei jeder Navigation ausgelöst. 🎜🎜Registrieren Sie einen globalen Resolution Guard über router.beforeResolve. 🎜rrreee🎜Callback-Parameter, Rückgabewert ist derselbe wie beforeEach. Es ist auch möglich, mehrere globale Parsing-Guards zu definieren. 🎜

afterEach

Globaler Post-Hook, tritt auf, nachdem der Routensprung abgeschlossen ist, nach beforeEach und beforeResolve, beforeRouteEnter (Schutz innerhalb der Komponente) Vor. Es wird auch bei jeder Navigation ausgelöst. 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 传递回调就没有必要了。

总结

完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next
Registrieren Sie einen globalen Posthook über router.afterEach.

Dies Die beiden Parameter des Hooks sind die gleichen wie to und from in beforeEach. Im Gegensatz zu anderen globalen Hooks akzeptieren diese Hooks jedoch weder die Funktion next noch ändern sie die Navigation selbst.

Route Guard

Wie der Name schon sagt, handelt es sich um einen Hook im Zusammenhang mit dem Routing. Wir haben nur einen Route Guard, nämlich beforeEnter.

beforeEnterSie müssen den beforeEnter-Schutz in der Routing-Konfiguration definieren. Dieser Schutz wird nur beim Betreten der Route ausgelöst. Er wird unmittelbar nach beforeEach ausgeführt Wird nach ausgeführt. Wird ausgelöst, wenn sich Parameter, query oder hash ändern.

🎜🎜🎜beforeEnter Route Guard sind to, from, next, genau wie beforeEach. 🎜

Komponentenschutz

🎜Wie der Name schon sagt, handelt es sich um einen innerhalb der Routing-Komponente definierten Schutz. 🎜🎜beforeRouteEnter🎜🎜 🎜🎜Dieser Hook wird aufgerufen, bevor die Route in die Komponente eintritt. Er wird nach dem globalen Guard beforeEach und dem Route Guard beforeEnter, dem globalen beforeResolve und aufgerufen den globalen afterEach vor dem Aufruf. 🎜🎜Zu den Parametern gehören <code>to, from, next. 🎜🎜Auf die Instanz der Komponente kann in diesem Guard nicht zugegriffen werden, d. h. this ist undefiniert, d. h. es wird vor beforeCreateausgelöst > Lebenszyklus. 🎜🎜beforeRouteUpdate🎜🎜 🎜🎜Für beforeRouteUpdate ist this bereits verfügbar, sodass kein Rückruf an next übergeben werden muss. 🎜🎜beforeRouteLeave🎜🎜 🎜🎜Für beforeRouteLeave ist this bereits verfügbar, sodass kein Rückruf an next übergeben werden muss. 🎜

Zusammenfassung

🎜Navigationsanalysevorgang abschließen🎜

1. Navigation wird ausgelöst. 🎜
2. Rufen Sie den beforeRouteLeave-Guard in der deaktivierten Komponente auf. 🎜
3. Rufen Sie den globalen beforeEach-Schutz auf. 🎜
4. Rufen Sie den beforeRouteUpdate-Guard in der wiederverwendeten Komponente auf. 🎜
5. Rufen Sie beforeEnter in der Routing-Konfiguration auf. 🎜
6. Asynchrone Routing-Komponenten auflösen. 🎜
7. Rufen Sie beforeRouteEnter in der aktivierten Komponente auf. 🎜
8. Rufen Sie den globalen beforeResolve-Schutz auf. 🎜
9. Navigation bestätigt. 🎜
10. Rufen Sie den globalen Hook afterEach auf. 🎜
11. Lösen Sie DOM-Updates aus. 🎜
12. Rufen Sie die Rückruffunktion auf, die im beforeRouteEnter-Schutz an next übergeben wird, und die erstellte Komponenteninstanz wird als Parameter der Rückruffunktion übergeben. 🎜🎜🎜🎜Das Obige ist die offizielle Antwort. Jetzt verwenden wir ein Flussdiagramm, um es intuitiv darzustellen. 🎜🎜🎜🎜🎜Verwandte Empfehlungen: „🎜vue.js Tutorial🎜“🎜

Das obige ist der detaillierte Inhalt vonWie viele Arten von Vue-Routing-Hook-Funktionen gibt es? Was sind die Unterschiede?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!