Verwenden Sie vue-route+beforeEach, um Navigationswächter zu erstellen

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Verwendung von vue-route+beforeEach zur Erstellung von Navigationswächtern vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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 Navigationswächter (Navigationswächter) 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

Erstens sehen wir uns die Verwendung von beforeRouteUpdate in einem Dokument an:

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

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

Wenn eine Navigation ausgelöst wird, wird der globale beforeEach-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 Schutzmethode erhält drei Parameter:

zu: Route: das einzugebende Zielroutenobjekt

von: Route: die aktuelle Navigation Route, die gleich 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:

rrree

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:

So bedienen Sie das JS-Cookie-Plug-in

So verwenden Sie Node.js zur Registrierung zur E-Mail-Aktivierung

Das obige ist der detaillierte Inhalt vonVerwenden Sie vue-route+beforeEach, um Navigationswächter zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!