beforeEach implementiert die Routing-Sprungüberprüfungsfunktion

Dieses Mal bringe ich Sie dazu, die Routing-Sprungüberprüfungsfunktion zu implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung der Routensprungüberprüfung? Schauen Sie mal rein.

Die Durchführung einiger Überprüfungen vor dem Weiterleiten von Sprüngen, wie z. B. die Anmeldeüberprüfung (gehen Sie zur Anmeldeseite, wenn Sie nicht angemeldet sind), ist eine häufige Anforderung auf Websites. In dieser Hinsicht kann das von vue-route bereitgestellte beforeRouteUpdate problemlos Navigation Guards (Navigation-Guards) implementieren.

Der Name Navigationswächter klingt seltsam, aber da das offizielle Dokument ihn so übersetzt, nennen wir ihn so.

Fügen Sie die Dokumentadresse ein: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

Lassen Sie uns zunächst einen Auszug aus einem Dokument erstellen Verwendung von beforeRouteUpdate:

Sie können router.beforeEach verwenden, um einen globalen Before-Guard zu registrieren:

const router = new VueRouter({ ... }) 
router.beforeEach((to, from, next) => { 
 // ... 
})

Wenn eine Navigation ausgelöst wird, wird der globale Before-Guard in der Reihenfolge seiner Erstellung aufgerufen. Guards werden asynchron analysiert und ausgeführt. Zu diesem Zeitpunkt wartet die Navigation, bis alle Guards aufgelöst sind.

Jede Guard-Methode erhält drei Parameter:

zu: Route: die einzugebende Zielroute Objekt

von: Route: Die Route, die die aktuelle Navigation verlassen wird

next: Funktion: Diese Methode muss aufgerufen werden, um diesen Hook aufzulösen. Der Ausführungseffekt hängt von den Aufrufparametern der nächsten Methode ab.

next(): Fahren Sie mit dem nächsten Hook in der Pipeline fort. Wenn alle Hooks ausgeführt werden, wird der Navigationsstatus bestätigt.

next(false): Aktuelle Navigation unterbrechen. Wenn sich die URL des Browsers ändert (vielleicht manuell durch den Benutzer oder über die Zurück-Schaltfläche des Browsers), wird die URL-Adresse auf die Adresse zurückgesetzt, die der Von-Route entspricht.

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

next(error): (2.4.0+) Wenn der an next übergebene Parameter eine Fehlerinstanz ist, wird die Navigation beendet und der Fehler an den von router.onError() registrierten Rückruf übergeben.

Stellen Sie sicher, dass Sie die nächste Methode aufrufen, sonst wird der Hook nicht aufgelöst.

Schreiben Sie unten ein Beispiel. Auf unserer Kontoseite, einschließlich Kursen und Bestellungen, müssen Sie vor dem Springen feststellen, ob Sie angemeldet sind . Springen Sie zur Startseite:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Axios-Implementierung der Dateninteraktionsschritte, detaillierte Erklärung

Angular Component-Anwendungsfall, detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonbeforeEach implementiert die Routing-Sprungüberprüfungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!