Résoudre le problème du passage des paramètres dynamiques de requête dans vue-router

Ci-dessous, je partagerai avec vous un article qui résout le problème du passage des paramètres dynamiques de requête dans vue-router. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

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 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, cela a échoué. Ensuite, j'ai accidentellement vu une question et une réponse

problème de paramètre entrant de configuration dynamique de vue-router, 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 l'impression d'avoir une idée. La solution est la suivante :

Lier l'identifiant de Li Obtenez l'identifiant. dans les données, puis écrivez la liaison 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
 }
}

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

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Méthode Ajax d'envoi et de réception de données de flux d'octets binaires

Utilisation de la technologie Ajax pour obtenir un rafraîchissement partiel Exemple de code de quantité de produit et de prix total

Résout parfaitement le problème d'échec de session lors de l'accès à ajax

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!