What are the steps for query dynamic parameter passing in vue-router?

This time I will bring you what are the steps for dynamically passing query parameters in vue-router, and what are the notesfor dynamically passing query parameters in vue-router. The following is a practical case, let's go together 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
 }
}

Then the url will become like this: http://localhost:8080/editmovie?id=2016987, and the problem will be solved.

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:

How Vue uses dynamic refresh Echarts component

Case analysis of using selectpicker drop-down box

The above is the detailed content of What are the steps for query dynamic parameter passing in vue-router?. For more information, please follow other related articles on the PHP Chinese website!