Comment gérer le passage des paramètres dynamiques de la requête dans vue-router

Cette fois, je vais vous montrer comment gérer le transfert de paramètres dynamiques de requête dans vue-router, et quelles sont les précautions à prendre pour le transfert de paramètres dynamiques de requête dans vue-router. Ce qui suit est un cas pratique, jetons un coup d'œil. .

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 est juste statique, l'url sera toujours : http://localhost:8080/editmovie?id=111

En fait, l'identifiant dont j'ai besoin est placé dans un élément caché dans :

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

Au début, mon idée était d'appeler les méthodes dans les composants, mais j'ai essayé plusieurs fois et j'ai échoué. Ensuite, j'ai accidentellement vu une question-réponse

.

Problème de paramètre entrant de configuration dynamique de vue-router, 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'avais envie de tout ça d'un coup Avec le idée en tête, la solution est la suivante :

Liez l'identifiant de li à l'identifiant dans data, puis écrivez l'identifiant lié dans la requête

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

mint-ui permet d'actualiser les menus déroulants et de charger les menus déroulants sur le téléphone mobile

Ajout dynamique JS Comparaison entre la méthode et la méthode d'ajout dynamique PHP

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!