Comment utiliser le paramètre de route passant dans vue

Cet article vous présente principalement des informations pertinentes sur les pièges rencontrés dans le transfert des paramètres de routage dans Vue. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous les amis qui en ont besoin. avec l'éditeur ci-dessous.

Avant-propos

Il existe de nombreux types de paramètres de saut d'itinéraire dans Vue. Ceux que j'utilise couramment sont les suivants

• Sauter via le lien du routeur

• Saut d'itinéraire via la navigation programmatique

Cet article vous le présente principalement Concernant certains Les pièges rencontrés lors du passage des paramètres de routage de Vue, je voudrais les partager pour référence et étude de tous. Je ne dirai pas grand-chose ci-dessous, jetons un coup d'œil à l'introduction détaillée.

D'abord la définition de mon itinéraire

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

Je saute du composant A au composant B et passe quelques paramètres via l'objet d'information d'itinéraire

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

Obtenir les paramètres dans le composant B

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

Le paramètre paramB transmis via l'objet params de la route est toujours indéfini et la raison ne peut jamais être trouvée. Après avoir consulté les informations, j'ai finalement trouvé la raison. C'est parce que l'objet params de la route doit être appelé via le nom de la route, mais pas via le chemin, et l'objet query n'a pas cette exigence.

On modifie donc le code :

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

Remplacez simplement le paramètre path par le nom de la route correspondante A ce moment, tout est normal lors de l'obtention des paramètres.

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

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser le composant audio dans le mini programme WeChat

Comment utiliser le composant vidéo pour lire des vidéos dans le mini programme WeChat

Comment implémenter la barre de progression du téléchargement dans l'applet WeChat

Comment utiliser l'outil de vérification du numéro de téléphone mobile PhoneUtils en javaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!