Die Hook-Funktion von Vue-Router implementiert Routing Guard

Überblick

Was ist Route Guard? Der Routenwächter ähnelt ein wenig dem Ajax-Anforderungsabfang, der die Anforderung vor dem Senden abfängt und vor dem Senden der Anforderung etwas unternimmt. Der Routenwächter hat hier eine ähnliche Bedeutung. Er kann einfach so verstanden werden, dass er Sie anhält und überprüft, bevor Sie die Route betreten. Ist das ein bisschen wie der Sicherheitsbeamte am Tor einer Mittelschule? Halten Sie Sie vor dem Eintreten an und lassen Sie hinein, wenn Sie einen Studentenausweis haben, lassen Sie Sie jedoch nicht hinein, wenn Sie keinen Studentenausweis haben. Natürlich tut der Routing Guard mehr, als Sie nur vor dem Eintreten anzuhalten, es gibt auch andere Hook-Funktionen, um andere Vorgänge auszuführen.

Vue-Router bietet uns drei Arten von Hook-Funktionen zum Implementieren von Routing-Guards:

1. Globale Hook-Funktion (beforeEach, afterEach)

2. Routingspezifische Hook-Funktion (beforeEnter)

3. Hook-Funktionen in Komponenten (beforeRouterEnter, beforeRouterUpdate, beforeRouterLeave)

Schauen wir uns zunächst die globale Hook-Funktion an:

Globale Hook-Funktion

vorJedem:

beforeEach erhält drei Parameter: to, from und next; to: das zu betretende Routenobjekt; from: das zu verlassende Routenobjekt; next: die Steuerparameter der Route;

Es gibt vier Möglichkeiten, als nächstes anzurufen:

next(): Wenn alles gut geht, rufen Sie diese Methode auf, um den nächsten Hook einzufügen.

next(false): Routennavigation abbrechen. Die URL zeigt zu diesem Zeitpunkt die Routenadresse an, die gerade verlassen wird.

next('/login'): Die aktuelle Route wird beendet und eine neue Routennavigation eingeleitet (die Routenadresse kann frei angegeben werden)

next(error): Die Routennavigation wird beendet und der Fehler wird an den von router.onError() registrierten Rückruf übergeben.

Normalerweise verwenden wir globale Hooks, um Berechtigungen zu steuern, z. B. das Springen zur Anmeldeseite, wenn eine Seite ohne Anmeldung aufgerufen wird, und welche Ebene der Benutzer erreichen muss, um auf die aktuelle Seite zuzugreifen. Dies sind alles Seitenberechtigungssteuerungen, die über die Hook-Funktion beforeEach erreicht werden können:

main.js (globale Hook-Funktionen werden normalerweise in main.js geschrieben):

// Methoden-Hook vor dem Betreten der Route router.beforeEach((to, from, next) => {
  console.log(um, 'den ersten Parameter voranzustellen')
  console.log(von, 'den zweiten Parameter voranstellen')
  console.log(nächstes, 'den dritten Parameter voranstellen')
  /
    zur Zielroute von der Quellroute weiter zur nächsten Route springen*/
//Hier verwenden wir local und storange, um die Überprüfung der Berechtigungen zu simulieren, if (window.localstorange.getItem("token")) {
    // Wenn es existiert, direkt zur entsprechenden Route springen next();
  } anders {
    // Wenn es nicht existiert, springen Sie zur Anmeldeseite next('/login');
  }
});

Nach jedem:

AfterEach ist wie beforeEach ein globaler Guard-Hook und wird in main.js aufgerufen. AfterEach hat einen next-Parameter weniger als beforeEach.

von: dem Routenobjekt, das gerade verlassen wird;

afterEach() wird im Allgemeinen verwendet, um die Position der Bildlaufleiste der Seite zurückzusetzen:

Wenn wir eine sehr lange Seite haben und zu einer bestimmten Position darin scrollen, wird die Position der Bildlaufleiste der neuen Seite dort sein, wo die vorherige Seite geblieben ist. Zu diesem Zeitpunkt können wir afterEach verwenden, um sie zurückzusetzen:

//Globaler Routenänderungs-Hook router.afterEach((to, from) => {
  //Bildlaufleiste oben wiederherstellen window.scrollTo(0, 0);
})

Routingspezifische Hook-Funktionen

vorEneter:

Wie der Name schon sagt, haben nur die angegebenen Routen diese Hook-Funktionen. Normalerweise konfigurieren wir diese Hook-Funktionen in der Routenkonfigurationsdatei. Wir können nur die Hooks vor der Änderung festlegen, nicht die Hooks nach der Änderung.

const router = neuer VueRouter({
    Routen
});
const Routen = [
    {
        Pfad: '/Seite1',
        Komponente:Seite1,
        Kinder: [
            {
                Pfad: "Telefon",
                Komponente: Telefon
            },
            {
                Pfad: "Computer",
                Komponente: Computer
            },
        ],
//Routenexklusive Hook-Funktion beforeEnter:(to,from,next)=>{
            konsole.log(zu);
            console.log(von);
            nächstes(falsch);
        }
    },

Der obige Code bedeutet, dass der beforeEnter-Hook nur beim Aufrufen von /page1 ausgelöst wird. Beim Aufrufen anderer Seiten wird er nicht ausgelöst.

Hook-Funktion in Komponente

vorRouteEnter(nach,von,weiter):

Wird aufgerufen, bevor die Route eintritt. Da die Vue-Instanz zu diesem Zeitpunkt noch nicht erstellt wurde, ist beforeEnter die einzige Hook-Funktion, die dies nicht verwenden kann.

nach: das einzugebende Routenobjekt;

von: dem Routenobjekt, das gerade verlassen wird;

Weiter: Routing-Steuerparameter

vorRouteUpdate(nach,von,weiter):

Wird aufgerufen, wenn die Route geändert wird, wie beispielsweise bei der in unserem vorherigen Artikel erwähnten dynamischen Routenparameterübertragung. In diesem Fall wird auch unser beforeRouteUpdate aufgerufen.

nach: das einzugebende Routenobjekt;

von: dem Routenobjekt, das gerade verlassen wird;

weiter: Routing-Steuerparameter;

vorRouteLeave(nach,von,weiter):

Wird aufgerufen, wenn die Route die Komponente verlässt;

nach: das einzugebende Routenobjekt;

von: dem Routenobjekt, das gerade verlassen wird;

Weiter: Routing-Steuerparameter

Hinweis: Da die Vue-Instanz nicht erstellt wurde, als „beforeRouteEnter“ ausgelöst wurde, kann dies in dieser Hook-Funktion nicht verwendet werden, während „beforeRouteUpdate“ und „beforeRouteLeave“ auf die Instanz zugreifen können, da die Instanz erstellt wurde, als diese beiden Funktionen ausgelöst wurden.

Wenn wir eine Hook-Funktion in einer Komponente aufrufen, rufen wir sie normalerweise innerhalb der Komponente auf. Beispiel:

<Vorlage>
    <div>
        <h1 id="h1">Startseite</h1>
        <p>
            <router-link to="/page1/phone">Mobiltelefon</router-link>
            <router-link to="/seite1/computer">Computer</router-link>
        </p>
        <Router-Ansicht></Router-Ansicht>
    </div>
</Vorlage>
<Skript>
    Standard exportieren {
    //Aufruf bevor die Route beginnt beforeRouteEnter (to, from, next) {
    window.document.title = "Willkommen";
    nächste();
  },
    //Rufen Sie beforeRouteUpdate(to,from,next) auf, wenn die Route geändert wird {

  },
   //Wird aufgerufen, wenn die Route beginnt beforeRouteLeave(to,from,next){

  },
        Daten () {
            zurückkehren {
                msg: „Ich bin eine Komponente von Seite 1“
            }
        },
    }
</Skript>

Oben sind die Details der Vue-Router-Hook-Funktion zur Implementierung des Routing Guard aufgeführt. Weitere Informationen zum Vue-Router-Routing Guard finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!