How to handle the dynamic parameter passing of query in vue-router

This time I will show you how to handle the dynamic parameter transfer of query in vue-router, and what are the precautions for dynamic parameter transfer of query in vue-router. The following is a practical case, let's take a look.

I have been writing a project recently. In the process of writing the project, I always find problems of one kind or another. For example, how does the query in vue-router pass dynamic parameters? After some twists and turns, the problem was solved. The problem is described as follows:

I hope the url will be like this when jumping: http://localhost:8080/editmovie?id=****

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

but? The above is just a static one, the url will always be: http://localhost:8080/editmovie?id=111

In fact, the id I need is placed in a hidden element In:

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

At first my idea was to call the methods in the components, but I tried several times and failed. Then I accidentally saw a question and answer

vue-router dynamically configures the incoming parameters problem, and then I saw the following 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>

I suddenly felt like I had an idea. The solution is as follows:

Bind the id of li to the id in the data, and then write the bound id in the query.

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

I believe I read it You have mastered the method in the case of this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

mint-ui makes pull-down refresh and pull-up loading on the mobile phone

JS dynamic addition Method comparison with PHP dynamic addition method

The above is the detailed content of How to handle the dynamic parameter passing of query in vue-router. For more information, please follow other related articles on the PHP Chinese website!