Explication détaillée des paramètres de transmission de vue+query

Cette fois, je vais vous apporter une explication détaillée des étapes de passage des paramètres dans vue+query Quelles sont les précautions pour passer des paramètres dans vue+query Voici un cas pratique, prenons un. regarder.

J'apprends Vue récemment. Cet article présente l'utilisation des paramètres de vue et des paramètres de requête. Partagez-le avec tout le monde et laissez une note pour vous-même

. Déclaratif :

Programmation : router.push(...)

Les deux méthodes peuvent implémenter des liens de saut. Dans la continuité de l'article précédent, sautez les liens vers le composant B via le composant A et transmettez les paramètres.

1. Router.push utilise

routeur/index.js

export default new Router({
 routes: [
   {
   path: '/',
   name: 'A',
   component: require('../components/A')
  },
  {
   path: '/B/:name/:age',
   name: 'B',
   component: require('../components/B')
  }
 ]
})

Ci-dessus, ajoutez deux paramètres nom et âge au composant B dans

Route

Un composant, liez un événement @click, passez au composant B pour transmettre les paramètres, utilisez params

<template>
 <p> <!---只允许有一个最外层标签 ！-->
  <p>
   <p>{{message}}</p>
   <p @click="toBFun">跳转B组件啊啊</p>
   <!--<router-link :to="{ path: &#39;/B&#39;,params:{name:&#39;zs&#39;,age:22}}">跳转B组件啊啊</router-link>-->
  </p>
 </p>
</template>
<script>
 export default {
  data: function () {
   return {
    message: 'vue好帅啊！'
   }
  },
  methods: {
   toBFun: function(){
    this.$router.push({name:'B',params:{name:'xy',age:22}});
   }
  }
 }
</script>
<style>
</style>

A ce moment, le navigateur affichera : http://localhost:8080/#/B/xy/22

Jetez un œil à la requête valeur et aux changements d'adresse

Également dans le fichier de routage router/index.js, il y a deux paramètres inchangés name, age

 {
   path: '/B/:name/:age',
   name: 'B',
   component: require('../components/B')
  }

Dans le composant A, les paramètres étaient préalablement passés via params,

this.$router.push({name:'B',params:{name:'xy',age:22}});

Après remplacement, interrogez

 this.$router.push({name:'B',query:{name:'xy',age:22}});

A ce moment, le navigateur trouvera : http://localhost:8080/#/?name=xy&age=22

Grâce aux deux méthodes ci-dessus, les paramètres seront conservés après l'actualisation de la page.

Obtenir la valeur est un peu différent :
params: this.$route.params.name;

requête:this.$route.query.name;

-------------------------- Il existe un autre moyen -------------------- ------- -----------------------

Utiliser le lien du routeur

 <router-link :to="{ path: &#39;/B&#39;,query:{name:&#39;张飞&#39;,age:22}}">跳转B组件</router-link>

Après le saut, l'adresse du navigateur est : http://localhost:8080/#/B?name=zzz&age=22

Pareil que ça.$router.push(...)

 <router-link :to="{path:&#39;/B/123&#39;}">
    跳转B组件</router-link>
  </p>

{
   path: '/B/:name',
   name: 'B',
   component: require('../components/B')
  }

Valeur

this.$route.params.name

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

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!