Solve the problem of query dynamic parameter passing in vue-router

Below I will share with you an article that solves the problem of query dynamic parameter transmission in vue-router. It has a good reference value and I hope it will be helpful to everyone.

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 what? 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. , all failed. Then I accidentally saw a question and answer

vue-router dynamic configuration of incoming parameters, 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="/static/imghwm/default1.png"  data-src="el.image_list[0]"  class="lazy"  : alt="Solve the problem of query dynamic parameter passing in vue-router" >
  <h3 id="el-tourism-name-nbsp-el-tog-line-id">{{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 in data id, and then write the bound one 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
 }
}

Then the url will change It looks like this: http://localhost:8080/editmovie?id=2016987, and the problem is solved.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Ajax method of sending and receiving binary byte stream data

Use Ajax technology to achieve partial refresh Product quantity and total price example code

Perfectly solves the problem of Session failure during ajax access

##

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