Heim > Web-Frontend > js-Tutorial > Hauptteil

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

php中世界最好的语言
Freigeben: 2018-05-29 10:25:03
Original
4593 Leute haben es durchsucht

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) => {
 // ...
})
Nach dem Login kopieren

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
  1. von: Route: Die Route, die die aktuelle Navigation verlassen wird.
  2. 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.
    1. next(): Fahren Sie mit dem nächsten Hook in der Pipeline fort. Wenn alle Hooks ausgeführt werden, wird der
    2. -Status

      der Navigation bestätigt.

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

      des Browsers), wird die URL-Adresse auf die Adresse zurückgesetzt, die der Absenderroute entspricht.

    5. next('/') oder next({ path: '/' }): Zu einer anderen Adresse springen. Die aktuelle Navigation wird unterbrochen und eine neue Navigation gestartet.
    6. 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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage