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:'editmovie', query: {id : 111}}" class="edit">修改</router-link></li>
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>
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:'editmovie', 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 } }
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!