Quelles sont les étapes de transmission des paramètres dynamiques de requête dans vue-router ?

Cette fois, je vais vous expliquer quelles sont les étapes pour transmettre dynamiquement des paramètres dans une requête dans vue-router, et quelles sont les précautions pour transmettre dynamiquement des paramètres dans une requête dans vue-router. Ce qui suit est un. cas pratique, jetons un coup d'oeil ensemble.

J'ai récemment écrit un projet. Dans le processus d'écriture du projet, je rencontre toujours des problèmes d'un type ou d'un autre, comme la façon dont la requête dans vue-router transfère les paramètres dynamiques après quelques rebondissements. , le problème a été résolu, Le problème est décrit comme suit :

J'espère que l'URL sera comme ceci lors du saut : http://localhost:8080/ editmovie?id=****

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

Mais quoi ? Ce qui précède n'est qu'un statique, l'url sera toujours : http://localhost:8080/editmovie?id=111

En fait, l'identifiant que j'ai need est Placé dans un élément caché :

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

Au début, mon idée était d'appeler les méthodes dans le composant, mais j'ai essayé plusieurs fois et j'ai échoué, puis j'ai accidentellement vu. un problème de Q&A

vue-routerconfiguration dynamique de passage de paramètres, et puis j'ai vu le code suivant :

<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>

J'ai soudain eu l'impression d'avoir une idée. La solution est la suivante :

Liez l'identifiant de li à l'identifiant dans les données, puis écrivez la liaison dans le fichier. requête. Définissez simplement ceci

<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
 }
}

Ensuite, l'URL deviendra comme ceci : http://localhost:8080/editmovie?id=2016987, et le problème sera résolu.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment Vue utilise le composant Echarts d'actualisation dynamique

Analyse de cas d'utilisation de la liste déroulante Selectpicker

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!