How to implement dynamic parameter passing of query in vue-router

This time I will show you how to implement the dynamic parameter transfer of query in vue-router, and what are the things to note . 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, the url will always be: http://localhost:8080/editmovie?id=111

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

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

At first, my idea was to call the methods in the components, but I tried several times and failed. I accidentally saw a Q&A

vue-routerDynamic ConfigurationIncoming parameter 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 feel like I have 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. That’s it

<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 you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Use JS to detect computer configuration (with code)

How to customize the opening and closing of the vue project eslint verification

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