Heim > Artikel > Web-Frontend > So verwenden Sie Routennavigationswächter zur Steuerung von Routensprüngen in Vue
In Vue ist das Routing ein sehr wichtiger Teil, der Sprünge und die Navigation zwischen Seiten steuert. In der tatsächlichen Entwicklung müssen wir häufig bestimmte Routen steuern, z. B. kann der Zugriff nur erfolgen, wenn Sie angemeldet sind, oder für den Zugriff sind Administratorrechte erforderlich usw. Zu diesem Zeitpunkt müssen Sie Routing-Navigationsschutz verwenden, um die Routing-Steuerung zu implementieren.
Route Navigation Guard kann Routensprünge abfangen und einige Vorgänge vor oder nach Routensprüngen ausführen. In Vue werden Routennavigationswächter normalerweise mithilfe globaler Navigationswächter und komponenteninterner Navigationswächter implementiert. Im Folgenden stellen wir die Verwendung dieser beiden Methoden vor.
1. Global Navigation Guard
Global Navigation Guard kann das globale Routing steuern und wird normalerweise in der Vue-Instanz registriert. Der globale Navigationswächter enthält drei Hook-Funktionen:
Diese Funktion wird ausgeführt, bevor die Route springt:
In der beforeEach-Funktion können wir die Route beurteilen und weiter springen, wenn die Bedingungen erfüllt sind, andernfalls verwenden die nächste Methode Abfangen oder umleiten. Um beispielsweise zu bestimmen, ob eine Anmeldung erfolgen soll:
router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !store.state.isAuthenticated) { next('/login') } else { next() } })
Diese Funktion wird ausgeführt, nachdem die Route gesprungen ist. Sie erhält zwei Parameter:
In der afterEach-Funktion können wir die Route verarbeiten, z. B. das Aufzeichnen von Zugriffsdatensätzen usw.
router.afterEach((to, from) => { // 记录访问记录 })
Diese Funktion kann eine Hook-Funktion in der Routing-Konfiguration definieren, um asynchrone Routing-Sprünge zu verarbeiten.
Zum Beispiel:
{ path: '/dashboard', component: Dashboard, beforeEnter: (to, from, next) => { if (store.state.isAdmin) { next() } else { next('/login') } } }
Bei der Verwendung globaler Navigationswächter ist zu beachten, dass bei der Ausführung mehrerer Wächter die nächste Methode verwendet werden muss, um die Ausführungsreihenfolge zu steuern.
2. In-Component Navigation Guard
In-Component Navigation Guard verwendet zwei Funktionen, beforeRouteEnter und beforeRouteLeave, um die Routing-Steuerung zu implementieren.
Diese Funktion wird ausgeführt, bevor die Komponente instanziiert wird. Sie empfängt drei Parameter:
Da in der beforeRouteEnter-Funktion die Komponente nicht instanziiert wurde, können Sie nicht direkt auf dieses Objekt zugreifen. Sie müssen daher die nächste Methode verwenden, um einen Rückruf zu übergeben Funktion. Wird ausgeführt, nachdem die Komponente instanziiert wurde.
Zum Beispiel können wir diese Funktion verwenden, um dynamische Routen zu erstellen:
{ path: '/user/:id', component: User, beforeEnter: (to, from, next) => { api.getUser(to.params.id) .then(user => { to.meta.user = user next() }) .catch(error => { next('/error') }) } }
Diese Funktion wird ausgeführt, bevor die Komponente verlässt, und sie erhält drei Parameter:
In der beforeRouteLeave-Funktion können wir die aktuelle Komponente verarbeiten, z Daten speichern oder Benutzer zum Warten auffordern.
Zum Beispiel können wir den Benutzer vor dem Verlassen der Seite auffordern, Daten zu speichern:
beforeRouteLeave(to, from, next) { if (this.formDirty) { if (confirm('您是否要保存数据?')) { this.saveData() next() } else { next(false) } } else { next() } }
Bei der Verwendung von Navigationswächtern innerhalb der Komponente ist zu beachten, dass bei der Ausführung mehrerer Wächter die nächste Methode zur Steuerung verwendet werden muss die Reihenfolge der Ausführung.
Zusammenfassend sind Routing-Navigationswächter ein sehr wichtiger Bestandteil von Vue, der uns helfen kann, das Routing flexibel zu steuern. In der tatsächlichen Entwicklung müssen wir basierend auf den Geschäftsanforderungen eine geeignete Methode zur Verwendung von Routing-Navigationswächtern auswählen, um eine verfeinerte Steuerung des Routings zu erreichen und die Benutzererfahrung zu verbessern.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Routennavigationswächter zur Steuerung von Routensprüngen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!