So verwenden Sie die Routenparameterübergabe in Vue

Dieser Artikel führt Sie hauptsächlich in relevante Informationen zu den Fallstricken ein, die bei der Übertragung von Routing-Parametern in Vue auftreten. Der Artikel stellt sie im Detail anhand von Beispielcode vor. Es hat einen gewissen Referenz-Lernwert für alle, die es brauchen. Lasst uns lernen zusammen mit dem Herausgeber unten.

Vorwort

Es gibt viele Arten von Routensprungparametern in Vue. Die folgenden verwende ich häufig:

• Springen durch Router-Link

• Routensprung durch programmatische Navigation

Dieser Artikel stellt Ihnen hauptsächlich einige davon vor Die beim Übergeben von Vue-Routing-Parametern auftretenden Fallstricke möchte ich als Referenz und zum Studium für alle weitergeben. Ich werde im Folgenden nicht viel sagen, werfen wir einen Blick auf die detaillierte Einführung.

Zuerst die Definition meiner Route

{
 path: '/b',
 name: 'B',
 component: resolve => require(['../pages/B.vue'], resolve)
}

Ich springe von Komponente A zu Komponente B und übergebe einige Parameter durch das Routing-Informationsobjekt

this.$router.push({
 path: '/b',
 params: {
  paramA: 'a' 
 },
 query:{
  paramB: 'b'
 }
})

Erhalten Parameter in Komponente B

this.$route.query.paramB  //b
this.$route.params.paramA //undefined

Der über das params-Objekt der Route übergebene Parameter paramB ist immer undefiniert und der Grund kann nie gefunden werden. Nachdem ich die Informationen konsultiert hatte, fand ich schließlich den Grund. Das liegt daran, dass das Parameterobjekt der Route über den Routennamen, aber nicht über den Pfad aufgerufen werden muss und das Abfrageobjekt diese Anforderung nicht hat.

Also ändern wir den Code:

this.$router.push({
 name: 'B',
 params: {
  paramA: 'a' 
 },
 query:{
  paramB: 'b'
 }
})

Ersetzen Sie einfach den Pfadparameter durch den entsprechenden Routennamen. Zu diesem Zeitpunkt ist beim Abrufen der Parameter alles normal.

this.$route.query.paramB  //b
this.$route.params.paramA //a

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie die Audiokomponente im WeChat-Miniprogramm

So verwenden Sie die Videokomponente zum Abspielen von Videos im WeChat-Miniprogramm

So implementieren Sie den Download-Fortschrittsbalken im WeChat-Applet

So verwenden Sie das Tool zur Überprüfung der Mobiltelefonnummer PhoneUtils in JavaScript

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Routenparameterübergabe in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!