Detaillierte Erläuterung der Vue+Query-Übergabeparameter

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte zum Übergeben von Parametern in Vue+Query geben. Was sind die Vorsichtsmaßnahmen für das Übergeben von Parametern in Vue+Query? sehen.

Ich lerne kürzlich Vue. Dieser Artikel stellt die Verwendung von Vue-Parametern und Abfrageparametern vor. Teilen Sie ihn mit allen und hinterlassen Sie eine Notiz für sich selbst.

Deklarativ:

Programmierung: router.push(...)

Beide Methoden können Jump-Links implementieren, indem Sie in Fortsetzung des vorherigen Artikels Links zu Komponente B über Komponente A springen und Parameter übergeben.

1. Router.push verwendet

router/index.js

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

Fügen Sie oben zwei Parameter namens und Alter zur Komponente B in

Route

hinzu Eine Komponente, binden Sie ein @click-Ereignis, springen Sie zur B-Komponente, um Parameter zu übergeben, verwenden Sie Parameter

<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>

Zu diesem Zeitpunkt zeigt der Browser Folgendes an: http://localhost:8080/#/B/xy/22

Sehen Sie sich die Abfrage Wert und die Adressänderungen

an Auch in der Routing-Datei router/index.js gibt es zwei unveränderte Parameter: Name und Alter

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

In Komponente A wurden Parameter zuvor über params

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

übergeben Nach dem Austausch bitte abfragen

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

Zu diesem Zeitpunkt findet der Browser Folgendes: http://localhost:8080/#/?name=xy&age=22

Durch die beiden oben genannten Methoden bleiben die Parameter erhalten, nachdem die Seite aktualisiert wurde.

Das Abrufen des Werts ist etwas anders:
params: this.$route.params.name;

query:this.$route.query.name;

-------------------------- Es geht auch anders -------------------- ------- --------

Router-Link verwenden

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

Nach dem Sprung lautet die Browseradresse: http://localhost:8080/#/B?name=zzz&age=22

Dasselbe wie hier.$router.push(...)

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

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

Wert

this.$route.params.name

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Vue+Query-Übergabeparameter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!