Solve the Problem of dynamic parameter passing through query in vue-router.

Solve the Problem of dynamic parameter passing through query in vue-router.

Recently, when writing a project, you will always find one or another problems. For example, the query in vue-router can pass dynamic parameters, which has gone through some twists and turns to solve the problem,The problem is described as follows:

The url is as follows: http: // localhost: 8080/editmovie? Id = ****

<Li> <router-link: to = "{path: 'editmovi', query: {id: 111 }}" class = "edit"> modify </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 put in a hidden element:

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

At the beginning, I thought that I wanted to call the methods in the methods component, but tried several times and all failed. Then I accidentally saw a Q &

Vue-router dynamically configures input parameters. Then I can see the following code:

<li v-for=" el in hotLins" > <router-link :to="{path:‘details‘,query: {id:el.tog_line_id}}">    
The solution is as follows:
Bind the id of li to the id in data, and then write the bound id in the query.
<Li v-bind: id = "id"> <router-link: to = "{path: 'editmovi', query: {id: id }}" class = "edit"> modify </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 becomes: http: // localhost: 8080/editmovie? Id = 2016987, and the problem is solved.
The above article solves the problem of dynamic parameter passing through query in vue-router, which is all the content shared by Alibaba Cloud xiaobian. I hope to give you a reference and support for the customer's house.