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

Dieses Mal zeige ich Ihnen, wie Sie mit der dynamischen Parameterübertragung von Abfragen im Vue-Router umgehen und welche Vorsichtsmaßnahmen für die dynamische Parameterübertragung von Abfragen im Vue-Router gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das 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 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 und bin gescheitert. Dann habe ich versehentlich eine Frage und eine Antwort gesehen

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

rrree

Ich glaube, ich habe es gesehen Ich habe die Methode in diesem Artikel gemeistert. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

mint-ui ermöglicht Pull-Down-Aktualisierung und Pull-Up-Laden auf dem Mobiltelefon

JS Dynamic Addition Vergleich zwischen der Methode und der PHP Dynamic Additionsmethode

Das obige ist der detaillierte Inhalt vonSo handhaben 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!