Vue-Router hat mehrere Hooks
Es gibt 7 Haken: 1. beforeResolve; 3. beforeRouteEnter; 7. beforeRouteLeave;
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.
Wie viele Hook-Funktionen hat vue-router
? Was genau ist das und wie läuft der Ausführungsprozess ab? 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

Analysis
🎜vue-router
s Hook-Funktion bezieht sich tatsächlich auf Navigation Guard. 🎜🎜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, Route Guard, Component Guard. 🎜🎜Aufbau einer Code-Demonstrationsumgebung🎜🎜Zuerst richten wir kurz die Umgebung ein🎜🎜index.js🎜router.beforeResolve((to, from, next) => { next(); })

Globaler Schutz
🎜Wie der Name schon sagt, ist es global definiert, nämlich dasrouter
-Objekt in unserem index.js</code >. 🎜🎜<strong><span style="max-width:90%">beforeEach</span></strong>🎜🎜Globaler Frontschutz, der vor dem Routensprung ausgelöst wird und bei <strong>jeder Navigation</strong> erfolgt ausgelöst werden. 🎜🎜Registrieren Sie einen globalen beforeEach-Schutz über <code>router.beforeEach
. 🎜🎜
beforeEach
Der globale Frontschutz empfängt drei Parameter🎜- zu: Route: Das Ziel-Routing-Objekt, das gerade eintreten wird
- von: Route: Das Routenobjekt, das die aktuelle Navigation verlassen wird
- nächstes: Funktion: Diese Methode muss aufgerufen werden, andernfalls wird die Route aufgerufen blockiert werden.
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.

- false: Aktuelle Navigation abbrechen.
- Null, undefiniert, wahr oder direkte Rückgabe: Rufen Sie den nächsten Navigationswächter auf.
beforeEach
Front Guards. Es ist ersichtlich, dass der Seitensprung erst erfolgt, nachdem zwei Sekunden später zwei Protokolle ausgedruckt wurden. 🎜🎜
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🎜🎜Globaler Auflösungsschutz, vor dem Routensprung werden alle In-Komponenten-Schutzvorrichtungen ausgelöst Nachdem die asynchrone Routing-Komponente geparst wurde, wird sie auch bei jeder Navigation ausgelöst. 🎜🎜Registrieren Sie einen globalen Resolution Guard über 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教程》】
Das obige ist der detaillierte Inhalt vonVue-Router hat mehrere Hooks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Der Vue-Router-Fehler „NavigationDuplicated:Avoidedredundantnavigationtocurrentlocation“ ist in der Vue-Anwendung aufgetreten – wie kann er behoben werden? Vue.js wird als schnelles und flexibles JavaScript-Framework in der Front-End-Anwendungsentwicklung immer beliebter. VueRouter ist eine Codebibliothek von Vue.js, die für die Routing-Verwaltung verwendet wird. Allerdings manchmal

In diesem Artikel erhalten Sie eine detaillierte Erklärung des Vue-Routers im Vue-Familien-Bucket und erfahren mehr über die relevanten Routing-Kenntnisse. Ich hoffe, er wird Ihnen hilfreich sein!

Die Verwendung von Vue-Router ist eine gängige Methode zur Implementierung der Routing-Steuerung in Vue-Anwendungen. Bei Verwendung von Vue-Router tritt jedoch manchmal der Fehler „Fehler: Failedtoresolveasynccomponent:xxx“ auf, der durch einen asynchronen Komponentenladefehler verursacht wird. In diesem Artikel werden wir dieses Problem untersuchen und Lösungen anbieten. Verstehen Sie das Prinzip des asynchronen Ladens von Komponenten. In Vue können Komponenten synchron oder asynchron erstellt werden.

Bei der Verwendung von vue-router in einer Vue-Anwendung erscheint manchmal die Fehlermeldung „Fehler: Vermeidung redundanter Navigation zum aktuellen Standort“. Diese Fehlermeldung bedeutet „Vermeidung redundanter Navigation zum aktuellen Standort“ und wird normalerweise durch wiederholtes Klicken auf denselben Link oder die Verwendung desselben Routingpfads verursacht. Wie kann man dieses Problem lösen? Verwenden Sie beim Definieren des Routers den genauen Modifikator

Vue-Router: Wie verwende ich Routing-Metainformationen zum Verwalten von Routen? Einführung: Vue-Router ist der offizielle Routing-Manager von Vue.js, der uns dabei helfen kann, schnell Single-Page-Anwendungen (SPA) zu erstellen. Zusätzlich zu den gängigen Routing-Funktionen unterstützt Vue-Router auch die Verwendung von Routing-Metainformationen zur Verwaltung und Steuerung des Routings. Routing-Metainformationen sind ein benutzerdefiniertes Attribut, das an eine Route angehängt werden kann und uns dabei helfen kann, eine spezielle Logik oder Berechtigungskontrolle zu implementieren. 1. Was sind Routing-Metainformationen? Die Routing-Metainformationen sind

Kürzlich habe ich versucht, vue-router in einer Vue-Anwendung zu verwenden, bin jedoch auf ein Problem gestoßen: „UncaughtTypeError: Cannotreadproperty'push'ofundefined“. Was ist die Ursache dieses Problems und wie kann es gelöst werden? Lassen Sie uns zunächst den Vue-Router verstehen. vue-router ist das offizielle Routing-Management-Plug-in von Vue.js, das uns beim Erstellen von Single-Page-Anwendungen (SPA) helfen kann

Vue ist ein beliebtes Front-End-Framework, mit dem Entwickler schnell effiziente, wiederverwendbare Webanwendungen erstellen können. Vue-router ist ein Plug-in im Vue-Framework, das Entwicklern hilft, das Routing und die Navigation von Anwendungen einfach zu verwalten. Bei der Verwendung von Vue-Router tritt jedoch manchmal ein häufiger Fehler auf: „Error:Invalidroutecomponent:xxx“. In diesem Artikel werden die Ursachen und Lösungen für diesen Fehler erläutert. Der Grund liegt in Vu

Vue und Vue-Router: Wie teilt man Daten zwischen Komponenten? Einführung: Vue ist ein beliebtes JavaScript-Framework zum Erstellen von Benutzeroberflächen. Vue-Router ist der offizielle Routing-Manager von Vue, der zur Implementierung von Single-Page-Anwendungen verwendet wird. In Vue-Anwendungen sind Komponenten die Grundeinheiten zum Erstellen von Benutzeroberflächen. In vielen Fällen müssen wir Daten zwischen verschiedenen Komponenten austauschen. In diesem Artikel werden einige Methoden vorgestellt, die Ihnen beim Datenaustausch in Vue und Vue-Router helfen
