Detaillierte Erklärung der Verwendung von VueRouter Navigation Guards

Kurzbeschreibung

Wird hauptsächlich verwendet, um Navigation durch Umleitung oder Abbrechen zu schützen

Zum Beispiel, die Login-Informationen überprüfen: Wenn nicht angemeldet, wird alle auf die Login-Seite umgeleitet. Überprüfen Sie, ob die erforderlichen Operationen durchgeführt wurden, und unterbrechen Sie den Umzug, wenn nicht

wird in drei Hauptkategorien unterteilt: globale Wächter, Routenwächter, Komponentenwächter

Globale Wächter

beforeEach
beforeResolve
afterEach

Routenwächter

beforeEnter

Komponentenwächter

beforeRouteEnter
  // wird vor dem Bestätigen der zugehörigen Route des Komponenten rendern aufgerufen
  // Nein! Es ist nicht möglich, die Komponenteninstanz `this` zu erhalten
  // weil die Komponenteninstanz noch nicht erstellt wurde, bevor der Wächter ausgeführt wird
  Es ist nicht möglich, die Komponenteninstanz direkt zu erhalten
  Wir können jedoch durch den Callback-Funktion des next-Parameters die aktuelle Instanz erhalten und bearbeiten
  beforeRouteEnter: (to, from, next) => {
    next((vm) => {
      //vm ist die aktuelle Komponenteninstanz
    });
  }
beforeRouteUpdate
  // Wird aufgerufen, wenn der aktuelle Router geändert wird, aber die Komponente wiederverwendet wird
  // Zusammenfassung, für einen Pfad mit dynamischen Parametern /foo/:id, in /foo/1 und /foo/2 Zwischen dem Wechsel
  // Da der gleiche Foo-Component ge rendernt wird, wird die Komponenten-Instanz wiederverwendet. Und dieser Hook wird in diesem Fall aufgerufen.
  // Der Zugriff auf das Komponenten-Instanz `this` ist möglich
beforeRouteLeave
  // Wird aufgerufen, wenn derentsprechende Router der Komponente verlassen wird
  // Der Zugriff auf das Komponenten-Instanz `this` ist möglich

Parametererklärung

Diese Navigation Guards betreffen die Parameter: to, from, next

Außer dem globalen Guard afterEach haben alle anderen drei Parameter

（摘抄自官网）
to: Route: Das Ziel-Route-Objekt, das eingehen soll
from: Route: Die Route, von der die aktuelle Navigation abgeschlossen wird
next: Funktion: Es muss diese Methode aufgerufen werden, um diesen Schalter zu lösen. Der Effekt hängt von den Aufrufparametern der next-Methode ab.
  next(): Führe den nächsten Schalter im Pipeline aus. Wenn alle Schalter ausgeführt wurden, ist der Status der Navigation confirmed (bestätigt).
  next(false): Unterbreche die aktuelle Navigation. Wenn die URL des Browsers geändert wird (möglicherweise durch manuelle Eingabe des Benutzers oder den Zurück-Button des Browsers), wird die URL-Adresse auf die Adresse der from-Route zurückgesetzt.
  next('/): oder next({ path: '/): Springe zu einer anderen Adresse. Die aktuelle Navigation wird unterbrochen und eine neue Navigation wird ausgeführt.
  next(error): (2.4.0+) Wenn der übergebene next-Parameter ein Error-Objekt ist, wird die Navigation beendet und der Fehler wird an die Callbacks weitergegeben, die durch router.onError() registriert wurden.

Arbeitsmechanismus

Das ist alles, was wir Ihnen zu VueRouter Navigation Guards vorgestellt haben. Wir hoffen, dass unser Material für Sie nützlich ist und wir danken Ihnen für Ihre Unterstützung der Anleitungsschreibe.