So implementieren Sie die dynamische Parameterübergabe einer Abfrage im Vue-Router

Dieses Mal zeige ich Ihnen, wie Sie die dynamische Parameterübertragung von Abfragen im Vue-Router implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung der dynamischen Parameterübertragung von Abfragen im Vue-Router? Werfen wir einen Blick darauf.

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 der Komponente aufzurufen, aber ich habe es mehrmals versucht und bin versehentlich auf eine Frage und Antwort 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 habe plötzlich das Gefühl 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
 }
}

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:

JS zur Erkennung der Computerkonfiguration verwenden (mit Code)

So passen Sie das Öffnen und Schließen an der Eslint-Verifizierung des Vue-Projekts

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die dynamische Parameterübergabe einer Abfrage im Vue-Router. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!