Ausführliche Erklärung zur Verwendung von Routing Guards in vue2.0

Dieses Mal werde ich Ihnen detailliert erklären, wie Sie Routenwächter in vue2.0 verwenden sehen. Die Durchführung einiger Überprüfungen vor dem Weiterleiten von Sprüngen, wie z. B. die Anmeldeüberprüfung, ist eine häufige Anforderung auf Websites.

In dieser Hinsicht kann das von vue-route bereitgestellte

vor

RouteUpdate 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

Globale Guards 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 aufgerufen Schaffung. 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 Route, die die aktuelle Navigation verlassen wird.
nächste: 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
1. -Status

   der Navigation bestätigt.

next(false): Aktuelle Navigation unterbrechen. Wenn sich die URL des Browsers ändert (vielleicht manuell durch den Benutzer oder über die Zurück-
2. -Schaltfläche

   des Browsers), wird die URL-Adresse auf die Adresse zurückgesetzt, die der Absenderroute 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 router.onError( übergeben ) registrierter Rückruf.

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

Schreiben Sie unten ein Beispiel:

1. Listen Sie die „Routensammlung“ auf, die beim Springen zur Route in der Sammlung benötigt wird, wenn „. nicht angemeldet" Status", dann springen Sie zur Anmeldeseite LoginPage; wenn Sie die Anmeldeseite direkt aufrufen, springen Sie zur Startseite HomePage;

Ob Sie es glauben oder nicht: Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie String-Vorlagen in Vue

Wie Sie mit einem Sparsamkeitsfehler bei der Mac-Installation umgehen Bison

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung von Routing Guards in vue2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!