What are the steps for query dynamic parameter passing in vue-router?-JS Tutorial-php.cn

This time I will bring you what are the steps for dynamically passing query parameters in vue-router, and what are thenotesfor 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=****

修改

Copy after login

but? The above is just astatic, the url will always be: http://localhost:8080/editmovie?id=111

In fact, the id I need is Placed in a hidden element:

Copy after login

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:

   {{el.tourism_name}} {{el.tog_line_id}}
 {{el.address}}

Copy after login

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

修改

Copy after login

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 } }

Copy after login

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!