Detaillierte Erklärung des Unterschieds zwischen $router und $route in Vue

Wir verwenden normalerweise Routing in Vue-Projekten und Vue-Router ist der offizielle Routing-Manager von vue.js.

this.$route: Das Informationsobjekt der aktuell aktivierten Route. Jedes Objekt ist lokal und kann den Pfad, den Namen, die Parameter, die Abfrage und andere Attribute der aktuellen Route abrufen.

this.$router: globale Routerinstanz. Durch Einfügen der Routerinstanz in die Vue-Stamminstanz und anschließendes Einfügen in jede untergeordnete Komponente verfügt die gesamte Anwendung über Routingfunktionen. Es enthält viele Eigenschaften und Objekte (wie etwa das Verlaufsobjekt) und jede Seite kann seine Methoden push(), replace(), go() und andere aufrufen.

Jeder, der Vue verwendet hat, weiß, dass das Routing in programmatische und deklarative Typen unterteilt werden kann.

Deklarativ:

Verwenden Sie zum Navigieren einfach die Router-Link-Komponente und geben Sie den Link an, indem Sie das „to“-Attribut übergeben (Router-Link wird standardmäßig als „a“-Tag gerendert).

Wenn Sie Unterrouten in einer Seite verschachteln müssen und die Seite nicht springt, ist diese Methode nicht sehr nützlich, hahahaha ... Rendern Sie die Unterseite einfach in der Router-Ansicht.

Programmatisch:

Auf diese Weise müssen Sie VueRouter importieren und aufrufen.

Lassen Sie mich dann über die Schritte zur Verwendung von Vue-Router sprechen (das Folgende ist ein programmatischer Ansatz):

1. Definieren Sie zwei einzelne .vue-Komponenten für Routensprünge: home.vue und user.vue;

2. Importieren Sie vue, vue-router und definieren Sie Routen. Jede Route enthält ein Komponentenattribut, das eine Komponente abbildet --- router.js

Vue von „vue“ importieren
Router von „vue-router“ importieren

Home aus „./home.vue“ importieren
Benutzer aus „./user.vue“ importieren

Vue.use(Router);

3. Erstellen Sie eine Router-Instanz und übergeben Sie die Routenkonfiguration --- router.js

const Routen = [
    { Pfad: '/home', Komponente: Home },
    { Pfad: '/Benutzer', Komponente: Benutzer }
]

const router = neuer Router({
    Routen
})

4. Fügen Sie die Route in die Stamminstanz von Vue ein, damit Sie in jeder anderen Komponente --- main.js - auf die Route zugreifen können.

Router aus „./router“ importieren

neuer Vue({
    Router,
    rendern: h => h(App)
}).$mount('#app')

Die allgemeinen Schritte sind wie folgt

Okay, gleich zeigen sich unsere Schweinsfüße ﹏~*Es gibt zwei Möglichkeiten, auf die Route in den oben genannten Benutzer- und Home-Komponenten zuzugreifen: this.$router und this.$route. Die Anwendung dieser beiden Methoden ist in etwa gleich, es bestehen jedoch dennoch Unterschiede. (Unten dargestellt)

Sie können sehen, dass this.$route das Informationsobjekt der aktuell aktivierten Route anzeigt. Dieses Objekt ist lokal und kann den Pfad, den Namen, die Parameter, die Abfrage und andere Attribute der aktuellen Route abrufen, die hier nicht im Detail erläutert werden.

$route.matched ist ein Array, das alle verschachtelten Datensätze der aktuellen Route enthält, d. h. das Objekt-Array in der Routenkonfiguration, einschließlich seiner eigenen Informationen und untergeordneten Daten. Meine Routenkonfiguration sieht beispielsweise so aus:

const router = neuer VueRouter({
  Routen: [
    // Das folgende Objekt ist der Routing-Datensatz {
      Pfad: '/taskList',
      Komponente: TaskList,
      Name: 'Aufgabenliste',
      Kinder: [
        {
          Pfad: '/taskDetail',
          Komponente: TaskDetail,
          Name: „Aufgabendetails“
        }
      ]
    }
  ]
})

Das übereinstimmende Erweiterungsergebnis in this.$route lautet:

Wenn Sie beispielsweise Navigationsschutz für die Anmeldefunktion verwenden und Metadaten überprüfen müssen, um festzustellen, ob eine Anmeldung erforderlich ist, können Sie das Metafeld im Routendatensatz überprüfen, indem Sie $route.matched durchlaufen.

Darüber hinaus können Sie innerhalb der Vue-Instanz auch über this.$router auf die Routing-Instanz zugreifen. Es handelt sich um eine globale Routing-Instanz. Die Router-Instanz wird in die Vue-Stamminstanz und dann in jede untergeordnete Komponente eingefügt, sodass die gesamte Anwendung über Routing-Funktionen verfügt. Das Drucken von this.$router in einer beliebigen untergeordneten Komponente ergibt Folgendes:

Es enthält viele Eigenschaften und Objekte (wie etwa das Verlaufsobjekt) und jede Seite kann seine Methoden push(), replace(), go() und andere aufrufen.

Die push()-Methode fügt dem Verlauf einen Datensatz hinzu. Wenn Sie auf die Zurück-Schaltfläche des Browsers klicken, können Sie zur vorherigen Seite zurückkehren. Wenn wir auf <router-link to=' ... ' /> klicken, entspricht dies dem Aufruf von this.$router.push().

• Der Parameter dieser $router.push()-Methode kann ein String-Pfad oder ein Adressobjekt sein, zum Beispiel:
• dies.$router.push('home') dies.$router.push({Pfad: 'home'})

Sie können auch Parameter angeben, beachten Sie jedoch: Wenn ein Pfad angegeben ist, werden die Parameter ignoriert. Beispiel:

this.$router.push({path: 'home', params: { page: 2}}) Die Parameter hier werden ignoriert

Die gleiche Regel gilt für das to-Attribut von router-link

Es stehen mehrere Methoden zur Verfügung:

• dies.$router.push({Pfad: `/home/${page=2}``})
• dies.$router.push({name: 'home', params: {seite: 2}})
• this.$router.push({Pfad: 'home', Abfrage: {Seite: 2}})

Diese Methoden erhalten Parameter: this.$route.params.page / this.$route.query.page

Oben finden Sie eine ausführliche Erklärung des Unterschieds zwischen $router und $route in Vue. Weitere Informationen zu Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!