Schnelles Verständnis des Vue-Routing-Navigationsschutzes

Konzept:

„Navigation“ bedeutet, dass sich die Route ändert

Der vom vue-router bereitgestellte Navigationsschutz wird hauptsächlich zum Schutz der Navigation durch Springen oder Abbrechen verwendet. Es gibt mehrere Möglichkeiten, in den Routennavigationsprozess einzusteigen: global, speziell für eine einzelne Route oder auf Komponentenebene.

Navigationswächter : einschließlich globaler Navigationswächter und lokaler Navigationswächter

1. Globale Wache

vue-router hat drei globale Wächter

• router.beforeEach : globaler Frontguard vor dem Betreten des Routers
• router.beforeResolve : Globaler Auflösungswächter, der aufgerufen wird, nachdem beforeRouteEnter aufgerufen wurde (wird nicht häufig verwendet)
  
• router.afterEach : globaler Post-Hook nach Eingabe der Route

1. Globale Frontwache

Sie können einen globalen Before Guard mit router.beforeEach registrieren:

const router = neuer VueRouter({ ... })
router.beforeEach((bis, von, weiter) => {
// to und from sind beides Routing-Instanzen // to: die Route, zu der gesprungen wird // from: die aktuelle Route, die verlassen wird // next: Funktion })

• next: Function : 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 sind, wird der Navigationsstatus confirmed .
• next(false) : unterbricht die aktuelle Navigation. Wenn sich die Browser-URL ändert (entweder manuell durch den Benutzer oder durch Drücken der Zurück-Schaltfläche des Browsers), wird die URL-Adresse auf die Adresse zurückgesetzt, die der Absenderroute entspricht.
• next('/') oder next({ path: '/' }): Springe zu einer anderen Adresse. Die aktuelle Navigation wird unterbrochen und eine neue Navigation durchgeführt. Sie können ein beliebiges Standortobjekt an „next“ übergeben und so Optionen wie „replace: true“, „Name: ‚home‘“ und alle in to prop von router-link oder router.push verwendeten Optionen festlegen.
• next(error) : (2.4.0+) Wenn das an next übergebene Argument eine Fehlerinstanz ist, wird die Navigation abgebrochen und der Fehler an den mit router.onError() registrierten Rückruf übergeben.
  

Hinweis: Wenn es sich um next('/') oder next({ path: '/' }) handelt, muss, solange der freizugebende Pfad enthalten ist, davor ein Urteil erfolgen.

Lassen Sie ihn irgendwann gehen, sonst wird er den Zyklus immer wieder wiederholen.

2. Globaler Abwicklungswächter

2.5.0 Neu

// Globaler Auflösungsschutz router.beforeResolve((to,from.next) => { })

In 2.5.0+ können Sie einen globalen Schutz mit router.beforeResolve registrieren. Dies ist ähnlich wie router.beforeEach , außer

Resolve Guards werden aufgerufen, bevor die Navigation bestätigt wird und nachdem alle Component Guards und asynchronen Routenkomponenten aufgelöst wurden.

3. Globaler Post-Hook

Man kann auch globale After-Hooks registrieren, allerdings erhalten diese Hooks im Gegensatz zu Guards keine Next-Funktion und verändern nicht die Navigation selbst:

// Globaler Post-Hook router.afterEach((to,form) => { })

Denn: Wenn afterEach aufgerufen wird, wurde die Route bereits umgeleitet, sodass die nächste Funktion nicht mehr erforderlich ist

3. Router-exklusiver Schutz

Wenn Sie das Routing nicht global konfigurieren möchten, können Sie Guards für bestimmte Routen separat konfigurieren.

Beispiel: Konfigurieren Sie einen separaten Schutz für mainpage

{ 
Pfad: '/Hauptseite', 
Name: 'Über', 
Komponente: Über, // Routing exklusiver Schutz beforeEnter:(to,from,next) => {
 if(from.name === '/mainpage/about'){ alert("Das ist von about") 
   }anders{
 alert("Das ist nicht von about") 
   }next(); // Muss aufgerufen werden, um den nächsten Schritt auszuführen. Sonst wird es nicht springen.}
} 
},

4. Schutzvorrichtungen innerhalb von Komponenten

Schließlich können Sie die folgenden Routennavigationsschutzfunktionen direkt in Ihrer Routenkomponente definieren:

• beforeRouteEnter()： vor der Eingabe der Route
• beforeRouteUpdate()： Wenn die Route dieselbe Komponente wiederverwendet
• beforeRouteLeave()： Beim Verlassen der aktuellen Route
  

Nehmen Sie ein Beispiel im Produkt:

// Globaler Auflösungsschutz router.beforeResolve((to,from.next) => {
})
// Globaler Post-Hook router.afterEach((to,form) => {
})
{
Pfad: '/Hauptseite',
Name: 'Über',
Komponente: Über,
// Exklusiver Routing-Schutz beforeEnter:(to,from,ext) => {
if (from.name === '/hauptseite/über') {
alert("Das ist von ungefähr")
}anders{
alert("Das ist nicht von about")
}
next(); // Muss aufgerufen werden, um den nächsten Vorgang auszuführen. Sonst wird es nicht springen.}
}
},
Standard exportieren {
// Die Bedingung für das Auslösen des internen Guards beforeRouteUpdate der Komponente ist: Die aktuelle Route ändert sich, aber die Komponente wird wiederverwendet.
Beispielsweise wird für die Route von Produkt/Bestellungen zu Produkt/Warenkorb die Komponente Product.vue erneut verwendet und „beforeRouteUpdate“ wird ausgelöst. Sie können diese Instanz erhalten.
Ein vollständiger Navigationsanalyseprozess // Da die Komponenteninstanz beim Aufruf dieses Hooks noch nicht erstellt wurde, kann dies nicht abgerufen werden.
beforeRouteEnter (nach, von, weiter) {
Konsole.log(zu.Name);
// Wenn Sie die Instanz abrufen möchten // next(vm=>{
// // Die VM hier ist die Instanz der Komponente (diese)
// });
nächste();
},
vorRouteUpdate(nach,von,weiter){
console.log(nach.Name, von.Name);
nächste();
},
// Diese Methode wird aufgerufen, wenn die Route gerade verlassen wird // ​​Beispiel: Der Benutzer hat etwas bearbeitet, aber noch nicht gespeichert. Zu diesem Zeitpunkt möchte er diese Seite verlassen, daher müssen wir ihn daran erinnern, dass er es noch nicht gespeichert hat, und ihn fragen, ob er gehen möchte beforeRouteLeave (to, from, next) {
const leave = confirm("Sind Sie sicher, dass Sie gehen möchten?");
if(leave) next() // verlassen sonst next(false) // nicht verlassen },
}

• beforeRouteUpdate wird ausgelöst, wenn sich die aktuelle Route ändert, die Komponente aber wiederverwendet wird.
• Beispielsweise wird für den Weg von „Produkt/Bestellungen“ zu „Produkt/Warenkorb“ die Komponente „Product.vue“ erneut verwendet.
• beforeRouteUpdate wird ausgelöst. Sie können diese Instanz erhalten.

5. Ein vollständiger Navigationsanalyseprozess

• 1. Die Navigation wird ausgelöst.
• 2. Rufen Sie den Verlassenswächter in der deaktivierten Komponente (der Seitenkomponente, die gerade verlassen wird) auf. beforeRouteLeave
• 3. Rufen Sie den globalen beforeEach Schutz auf.
• 4. Rufen Sie den beforeRouteUpdate Schutz in der wiederverwendeten Komponente auf (2.2+).
• 5. Rufen Sie beforeEnter (einen routenspezifischen Schutz) in der Routenkonfiguration auf.
• 6. Analysieren asynchroner Routing-Komponenten
• 7. Rufen Sie beforeRouteEnter in der aktivierten Komponente (der Seitenkomponente, die gerade betreten wird) auf.
• 8. Rufen Sie den globalen beforeResolve Schutz auf (2.5+).
• 9. Die Navigation ist bestätigt.
• 10. Rufen Sie den globalen afterEach Hook auf. Alle Hooks wurden ausgelöst.
• 11. DOM-Update auslösen.
• 12. Verwenden Sie die erstellte Instanz, um die Rückruffunktion aufzurufen, die im beforeRouteEnter Schutz an next übergeben wurde.

Dies ist das Ende dieses Artikels zum schnellen Verständnis von Vue-Routing-Navigationswächtern. Weitere relevante Inhalte zu Vue-Routing-Navigationswächtern finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!