Der Unterschied zwischen this.$router und this.$route in Vue und der push()-Methode

Im offiziellen Dokument heißt es:

Durch Einfügen des Routers können wir über this.$router in jeder Komponente auf den Router zugreifen und über this.$route auch auf die aktuelle Route.

Es kann wie folgt verstanden werden:

this.$router entspricht einem globalen Routerobjekt, das viele Eigenschaften und Objekte enthält (wie z. B. ein Verlaufsobjekt). Jede Seite kann dessen push(), replace(), go() und andere Methoden aufrufen.

this.$route stellt das aktuelle Routenobjekt dar. Jede Route hat ein Routenobjekt, das ein lokales Objekt ist, das den entsprechenden Namen, Pfad, Parameter, die Abfrage und andere Attribute abrufen kann.

Über die push()-Methode:

Um zu einer anderen URL zu navigieren, verwenden Sie die Methode router.push. Diese Methode fügt dem Verlaufsstapel einen neuen Datensatz hinzu, sodass der Benutzer zur vorherigen URL zurückkehrt, wenn er auf die Zurück-Schaltfläche des Browsers klickt.

Wenn Sie auf einen <router-link> klicken, wird diese Methode intern aufgerufen, sodass ein Klick auf <router-link :to="..."> dem Aufruf von router.push(...) entspricht.

Der Aufruf der push()-Methode:

    // Zeichenfolge this.$router.push('home')
 
    //Objekt this.$router.push({path:'home'})
 
    //Benannte Route this.$router.push({name:'user', params:{userId: '123'}})
 
    //Mit Abfrageparametern wird daraus /register?plan=private
    this.$router.push({Pfad:'registrieren', Abfrage:{Plan:privat}})

Hinweis: Wenn ein Pfad angegeben ist, werden Parameter ignoriert, was bei der Abfrage im obigen Beispiel nicht der Fall ist. Stattdessen müssen Sie einen Routennamen angeben oder den vollständigen Pfad mit Parametern schreiben, wie im folgenden Beispiel gezeigt:

    const Benutzer-ID = "123";
 
    dies.$router.push({Pfad:`/user/${userId}`}); //->/user/123
 
    this.$router.push({name:'user', params:{userId}}); //->/user/123
 
    //Parameter hier sind nicht wirksam this.$router.push({path:'/user', params:{userId}}); //->/user

Dieselbe Regel gilt für die Eigenschaft „to“ der Router-Link-Komponente.

Zusammenfassen:

params wird zum Übergeben von Parametern verwendet. In push kann es nur name:'xxx' sein, nicht path:'/xxx', da params nur name verwenden kann, um Routen einzuführen. Wenn hier path geschrieben wird, ist die Seite, die die Parameter empfängt, undefiniert.

Methode zur Übergabe der Routing-Parameter:

1. Schreiben Sie den vollständigen Pfad handschriftlich auf:

    dies.$router.push({Pfad: `/user/${userId}`});

Parameter abrufen: this.$route.params.userId

2. Übergabe mit Parametern:

    dies.$router.push({name:'user', params:{userId: '123'}});

Parameter abrufen: this.$route.params.userId

URL-Format: URL ohne Parameter, http:localhost:8080/#/user

3. Verwenden Sie die Abfrage, um Folgendes zu übergeben:

    dies.$router.push({Pfad:'/Benutzer', Abfrage:{Benutzer-ID: '123'}});

Parameter abrufen: this.$route.query.userId

URL-Format: URL mit Parametern, http:localhost:8080/#/user?userId=123

Um es ganz klar auszudrücken: Query entspricht einer Get-Anfrage, und Sie können die Anfrageparameter in der Adressleiste sehen, wenn die Seite springt. Params entspricht einer Post-Anfrage, und die Parameter werden nicht in der Adressleiste angezeigt.

Beachten Sie, dass verschachtelte Pfade, die mit / beginnen, als Stammpfade behandelt werden. Dadurch können Sie die Vorteile verschachtelter Komponenten nutzen, ohne verschachtelte Pfade einrichten zu müssen.

Zusammenfassen

Damit ist dieser Artikel über den Unterschied zwischen this.$router und this.$route in Vue und der push()-Methode abgeschlossen. Weitere Informationen zum Unterschied zwischen this.$router und this.$route in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!