Heim  >  Artikel  >  Web-Frontend  >  Was sind die Schritte für die Übergabe dynamischer Abfrageparameter im Vue-Router?

Was sind die Schritte für die Übergabe dynamischer Abfrageparameter im Vue-Router?

php中世界最好的语言
php中世界最好的语言Original
2018-05-09 11:40:491833Durchsuche

Dieses Mal erkläre ich Ihnen, welche Schritte für die dynamische Übergabe von Parametern in der Abfrage im Vue-Router erforderlich sind und welche Vorsichtsmaßnahmen für die dynamische Übergabe von Parametern in der Abfrage im Vue-Router gelten Praktischer Fall, schauen wir uns das gemeinsam an.

Ich schreibe kürzlich ein Projekt und stoße immer wieder auf Probleme der einen oder anderen Art, z. B. wie die Abfrage im Vue-Router nach einigen Drehungen und Wendungen übertragen wird , das Problem wurde gelöst, Das Problem wird wie folgt beschrieben:

Ich hoffe, dass die URL beim Springen so aussieht: http://localhost:8080/ editmovie?id=****

<li><router-link :to="{path:&#39;editmovie&#39;, query: {id : 111}}" class="edit">修改</router-link></li>

Aber was? Das Obige ist nur ein statisches, die URL wird immer sein: http://localhost:8080/editmovie?id=111

Tatsächlich ist die ID I Bedarf wird in einem versteckten Element platziert:

<li class="hiden">2016987</li>

Zuerst hatte ich die Idee, die Methoden in den Komponenten aufzurufen, aber ich habe es mehrmals versucht und bin versehentlich auf ein Q&A gestoßen

vue-routerDynamische Konfigurationüber die Übergabe von Parametern, und dann sah ich den folgenden Code:

<li v-for=" el in hotLins" >
 <router-link :to="{path:‘details‘,query: {id:el.tog_line_id}}">
  <img :src="el.image_list[0]">
  <h3>{{el.tourism_name}} {{el.tog_line_id}}</h3>
  <p>{{el.address}}</p>
 </router-link>
</li>

Ich fühlte mich plötzlich Als hätte ich eine Idee. Die Lösung ist wie folgt:

Binden Sie die ID von li an die ID in den Daten und schreiben Sie dann die gebundene ID in die Abfrage.

<li v-bind:id="id"><router-link :to="{path:&#39;editmovie&#39;, query: {id : id}}" class="edit">修改</router-link></li>
export default {
 name : 'Movie',
 data() {
 return {
  id : ""
 }
 },
 methods: {
 getId () {
  var id = $('.hiden').eq(0).text();
  console.log(id);
 }
 },
 mounted() {
 this.id = $('.hiden').eq(0).text();
 },
 components : {
 Heade,
 Foot
 }
}

Dann wird die URL so aussehen: http://localhost:8080/editmovie?id=2016987, und das Problem wird gelöst.

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:

Wie Vue die dynamische Aktualisierungs-Echarts-Komponente verwendet

Fallanalyse der Verwendung des Selectpicker-Dropdown-Felds

Das obige ist der detaillierte Inhalt vonWas sind die Schritte für die Übergabe dynamischer Abfrageparameter im Vue-Router?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn