Verwendung von Routing- und Hook-Funktionen in Vue2.X

Im Folgenden werde ich Ihnen eine detaillierte Erklärung der Routing- und Hook-Funktionen basierend auf Vue2.X geben. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Ich war in letzter Zeit ein wenig beschäftigt bei der Arbeit, ich habe meine Artikel schon lange nicht mehr aktualisiert und ich habe nichts Neues gelernt.

Lassen Sie uns heute über diesen Routing-Hook sprechen.

Navigation und Hook-Funktionen:

Navigation: Route ändert sich Schlüsselwörter: Routenänderungen

Hook-Funktion: in einem anderen Knoten Funktionen werden in verschiedenen Phasen der Routenumschaltung aufgerufen (meiner Meinung nach ist die Hook-Funktion: eine Funktion, die durch einen bestimmten Knoten und ein bestimmtes Timing ausgelöst wird).

Die Hook-Funktion wird hauptsächlich verwendet, um die Navigation abzufangen, den Sprung abzuschließen oder abzubrechen und verschiedene Funktionen in verschiedenen Phasen der Navigation auszuführen. Schließlich sagt das Ausführungsergebnis der Hook-Funktion der Navigation, was zu tun. .

Die Navigation wartet, bis alle Hooks aufgelöst sind, und wartet darauf, dass die Hook-Funktion ihr mitteilt, was als nächstes zu tun ist. Verwenden Sie next() zur Angabe.

Lassen Sie mich Ihnen ein Beispiel für die Anmeldung geben

router.beforeEach(({meta, path}, from, next) => {　　 
 
　　const {auth = true} = meta  // meta代表的是to中的meta对象，path代表的是to中的path对象 
 
　　var isLogin = Boolean(store.state.user.id) // true用户已登录， false用户未登录　 
　　 
　　if (auth && !isLogin && path !== '/login') { // auth 代表需要通过用户身份验证，默认为true，代表需要被验证， false为不用检验 
　　　　return next({ path: '/login' }) // 跳转到login页面 
　　} 
 
 
　　next() // 进行下一个钩子函数 
})

Lassen Sie mich zuerst über die beforeEach-Hook-Funktion sprechen, es ist eine globale Before-Hook-Funktion , (vor jedem) bedeutet, dass es jedes Mal ausgeführt werden muss, wenn sich jede Route ändert.

Seine drei Parameter:

to: (Route-Routing-Objekt) Das Ziel-Routing-Objekt, das gerade eingegeben wird Attribute unter dem to-Objekt: Pfadparameter, Abfrage-Hash, vollständiger Pfad, übereinstimmender Name, Meta (unter übereinstimmend, aber dieses Beispiel kann direkt verwendet werden)

von: (Route-Routing-Objekt) Die aktuelle Navigation ist ungefähr Um die Route zu verlassen

next: (Funktionsfunktion) muss diese Methode aufgerufen werden, um diesen Hook aufzulösen. Aufrufmethode: next (Parameter oder leer) ***Muss

next (ohne Parameter) aufrufen: Fahren Sie mit dem nächsten Hook in der Pipeline fort. Wenn Sie die letzte Hook-Funktion erreichen, wird der Navigationsstatus bestätigt (Confirmed). )

next('/') oder next({ path: '/' }): Springe zu einer anderen Adresse. Die aktuelle Navigation wird unterbrochen und eine neue Navigation gestartet.

Der globale afterEach-Hook der globalen Hook-Funktion:

after Der Hook hat keine nächste Methode und kann die Navigation nicht ändern. Das bedeutet Nach der Ausführung gibt es eine angehängte Ausführungs-Hook-Funktion

Hook-Funktion in der Komponente: (beforeRouteEnter und beforeRouteLeave plus eine Watch-Funktion)

In die vue2.X-Komponente Die Hook-Funktion ist viel kleiner als vue1.X. .

Verwenden Sie die eigene Lebenszyklus-Hook-Funktion der Komponente, um Aktivieren und Deaktivieren zu ersetzen.

Verwenden Sie einen Watcher auf $router, um auf Routenänderungen zu reagieren.

canActivate kann von beforeEnter im verwendet werden Router-Konfiguration Die Implementierung von

canDeactivate wurde durch beforeRouteLeave ersetzt, das in der Root-Level-Definition einer Komponente angegeben ist. Diese Hook-Funktion wird mit der Komponenteninstanz als Kontext aufgerufen.

canReuse wurde entfernt, da es verwirrend war und selten verwendet wurde.

Verwenden Sie Ajax, um den Daten-Hook (zu, von, weiter) abzurufen, und ersetzen Sie ihn durch beforeRouteEnter (zu, von, weiter) in der Komponente

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

ProxyTable-domänenübergreifende Probleme im Vue-Cli-Projekt

So verwenden Sie Refs in React-Komponenten

Detaillierte Erläuterung der Verwendung von Devtool im Webpack

Das obige ist der detaillierte Inhalt vonVerwendung von Routing- und Hook-Funktionen in Vue2.X. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!