Recently, I am writing a project. During the process of writing a project, I will always find problems of one kind or another. For example, how query in vue-router transmits dynamic parameters, and it only took some twists and turns to solve the problem.The problem is described as follows:
I hope the URL will look like this when jumping: http://localhost:8080/editmovie?id=****
<li><router-link :to="{path:'editmovie', query: {id : 111}}" class="edit">Revise</router-link></li>
But what? The above is just a static one, and the url will always be: http://localhost:8080/editmovie?id=111
Actually the id I need is placed in a hidden element:
<li class="hiden">2016987</li>
At the beginning, my idea was to call the method in the methods in the component, but after trying it several times, it failed. Then I accidentally saw a question and answer
vue-router dynamically configures the incoming parameters issue, and then I see 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>{{}}</p>
</router-link>
</li>
I suddenly felt like I had an idea, and the solution was as follows:
Bind the id in data to the id of li, and then write the bound one in query.
<li v-bind:><router-link :to="{path:'editmovie', query: {id : id}}" class="edit">Revise</router-link></li>
export default {
name : 'Movie',
data() {
return {
id : ""
}
},
methods: {
getId () {
var id = $('.hiden').eq(0).text();
(id);
}
},
mounted() {
= $('.hiden').eq(0).text();
},
components : {
Heade,
Foot
}
}
Then the url becomes like this: http://localhost:8080/editmovie?id=2016987, and the problem is solved.
The above article solves the problem of query dynamic transmission in vue-router is all the content I share with you. I hope you can give you a reference and I hope you can support me more.