Lösen Sie das Problem der Übergabe dynamischer Abfrageparameter im Vue-Router

Im Folgenden werde ich einen Artikel mit Ihnen teilen, der das Problem der Übergabe dynamischer Abfrageparameter im Vue-Router löst. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

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 statisch, die URL lautet immer: http://localhost:8080/editmovie?id=111

Tatsächlich wird die ID, die ich benötige, in a platziert verstecktes Element in:

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

Zuerst war meine Idee, die Methoden in den Komponenten aufzurufen, aber ich habe es mehrmals versucht, alles scheiterte . Dann sah ich versehentlich eine Frage und Antwort

Problem mit der dynamischen Konfiguration des Vue-Routers und dann 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 hatte plötzlich das Gefühl, eine Idee zu haben. Die Lösung ist wie folgt:

Binden Sie die ID von li in die Daten-ID und dann schreibe das gebundene 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 ändert sich die URL. Es sieht so aus: http://localhost:8080/editmovie?id=2016987, und das Problem ist gelöst.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ajax-Methode zum Senden und Empfangen von Binärbyte-Stream-Daten

Verwendung der Ajax-Technologie zur Erzielung einer teilweisen Aktualisierung Beispielcode für Produktmenge und Gesamtpreis

Löst perfekt das Problem des Sitzungsfehlers bei Ajax-Zugriff

Das obige ist der detaillierte Inhalt vonLösen Sie das Problem der Übergabe dynamischer Abfrageparameter im Vue-Router. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!