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

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!