Detaillierte Erklärung des Unterschieds zwischen Routing-Hooks in Vue2.x und Vue3.x

vue2.x

Vorkonzept:

Routing-Hook-Kategorien

Insgesamt gibt es 3 Kategorien und 7 Hooks.

Das Konzept von Routing und Komponenten (zum einfachen Verständnis von Hook-Funktionen)

Routing und Komponenten sind zwei Konzepte, die man grob wie folgt betrachten kann:

• Die Route ist die Browser-URL
• Komponenten sind unterschiedliche Arten von Inhalten, die auf einer Webseite erscheinen.

Globale Routing-Hooks

router.beforeEach(to, from, next){ } Vornavigationsschutz

Vor dem Routing

router.afterEach(to, from, next){ } Beitragsnavigationswächter

Nach dem Eintritt in

router.beforeResolve(to, from, next){ } Auflösungswächter

Beim Parsen einer Komponente wurden alle Konfigurationen gelesen und alle vorherigen Ebenen durchlaufen. Führen Sie diese Funktion vor dem Parsen der Komponente aus.

Guard-Hook für die Routing-Konfiguration

beforeEnter() wird vor dem Lesen der Routing-Konfigurationsinformationen aufgerufen

Ausgeführt vor beforeCreate()

const router = neuer VueRouter({
  Routen: [
    {
      Pfad: '/foo',
      Komponente: Foo,
      beforeEnter: (bis, von, weiter) => { }
    }
  ]
})

Schutzhaken in Bauteilen

beforeRouteEnter(to, from, next){ } vor dem Betreten der Komponente

Standardmäßig können Sie die Komponenteninstanz nicht abrufen this

Allerdings können die folgenden Methoden zum Zugriff verwendet werden

vorRouteEnter(nach, von, weiter){ 

  // Die Callback-Funktion von next() wird instanziiert und beim Betreten der Route ausgeführt next(vm => {
    // vm entspricht der aktuellen Komponente this
  })
}

beforeRouteUpdate(to, from, next){ } vor dem Ändern der Komponente

Die aktuelle Komponente verwendet immer noch die Routing-Adressänderung und wird nur ausgeführt, wenn die beiden oben genannten Bedingungen erfüllt sind

beforeRouteLeave(to, from, next){ } Vor dem Verlassen der Komponente

Ausführungsreihenfolge für Routing-Hooks

Beispiel: Sprung von Komponente A zu Komponente B

beforeRouteLeave() verlässt Komponente A zuerst

beforeEach() global - vorderer Navigationsschutz

beforeEnter() vor dem Lesen der Routing-Konfigurationsinformationen (Lesen der B-Routing-Informationen)

beforeRouteEnter() vor dem Betreten der Komponente

beforeResolve() Auflösungswächter

afterEach() global - Beitragsnavigationsschutz

Bei einem Update auf Route B werden jedes Mal folgende drei Hooks ausgeführt:

beforeEach() Global - Vornavigationsschutz

beforeResolve() global - Auflösungswächter

beforeRouteUpdate() in der Komponente - vor der Änderung der Komponente

vue3.x

Vue3.x unterscheidet sich nur geringfügig von vue2.x, daher werden wir hier nur die Unterschiede erläutern.

Vergleichstabelle

Unterschiede und Ergänzungen:

• In Vue2.x gibt es 3 Komponenten. Wenn Komponente A zu Komponente B springt, gibt es in Komponente B Unterkomponenten:
  

Die Unterkomponenten in Komponente B lösen den Routing-Hook nicht aus

• In Vue3.x gibt es 3 Komponenten. Wenn Komponente A zu Komponente B springt, gibt es in Komponente B Unterkomponenten:
  

Die Unterkomponenten in Komponente B lösen die Routing-Hooks aus: onBeforeRouteUpdate und onBeforeRouteLeave
Die Unterkomponenten in Komponente B lösen den Routing-Hook nicht aus

• In Vue3.x gibt es 3 Komponenten. Wenn Komponente A zu Komponente B springt, gibt es in Komponente B Unterkomponenten:
  

Die Unterkomponenten in Komponente B lösen die Routing-Hooks aus: onBeforeRouteUpdate und onBeforeRouteLeave

Oben finden Sie eine detaillierte Erklärung der Unterschiede zwischen Routing-Hooks in Vue2.x und Vue3.x. Weitere Informationen zu den Unterschieden zwischen Routing-Hooks in Vue2.x und Vue3.x finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!