Home > Web Front-end > JS Tutorial > body text

How to implement dynamic parameter passing of query in vue-router

php中世界最好的语言
Release: 2018-05-03 17:47:54
Original
2415 people have browsed it

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:&#39;editmovie&#39;, query: {id : 111}}" class="edit">修改</router-link></li>
Copy after login
but? The above is just a

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

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

<li v-bind:id="id"><router-link :to="{path:&#39;editmovie&#39;, query: {id : id}}" class="edit">修改</router-link></li>
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
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!

Recommended reading:

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template