Comment implémenter le passage de paramètres dynamiques de requête dans vue-router

Cette fois, je vais vous montrer comment implémenter le transfert de paramètres dynamiques de requête dans vue-router. Quelles sont les précautions pour implémenter le transfert de paramètres dynamiques de requête dans vue-router. cas pratique. Jetons un coup d'oeil.

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. Par exemple, comment la requête dans vue-router passe-t-elle les paramètres dynamiques ? rebondissements pour résoudre le problème, 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. Cela suffit

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

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 :

Utiliser JS pour détecter la configuration de l'ordinateur (avec code)

Comment personnaliser l'ouverture et la fermeture d'une vérification eslint du projet vue

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!