Parameter passing during routing jump
Business scenarios: Click the click name of an item in the movie list page, jump to the movie details page, and view the detailed information of the selected movie. This process requires passing the movie ID as a parameter while jumping, so that the details page can obtain the selected item ID, thereby sending a request and querying detailed information.
1.Prepare a movie list page: A movie details page:
2.Configure routing:
a. When accessing address: http://localhost:8080/list, see the list page.
b. When accessing the address: http://localhost:8080/detail, see the details page.
3.Note: You need to add placeholders:
Parameter transfer method during routing jump 1
By using it after requesting the resource path?Splicing queryString method, passing parameters:
<router-link to="/detail?id=7&name=zs">xx</router-link>
Method 1: Question Mark Version
List page: Fill in the router-link tag for list items
<template>
<tbody>
<tr v-for="(item, i) in " :key="">
<td>
<router-link :to="`/detail?id=${}`">// Question mark version {{}}
</router-link>
</td>
</tr>
</tbody>
</template>Details page:
<template>
<div>
<h2>Movie details page</h2>
<p>Movie name：{{}}</p>
<p>Movie Type：{{}}</p>
</div>
</template>
<script>
import myaxios from './http/MyAxios'
export default{
data( ){
return{
movieData:{ },//Bind movie object }
},
mounted( ){ //The current primary key has been mounted to the DOM and is automatically called by vue when it is (exposed). ('The life cycle is mounted is called')
let id = this.$ //After receiving the request path? key= value parameter id ('Received parameter id:' + id)
let url = "/bmdapi/movie-info/query"
(url,{ id }).then(res =>{
(res) //The movie object { } is stored in it =
})
}
};
</script>Method 2: No question mark version
<router-link to="/detail/7">xx</router-link>
this.$('/detail/7')How to receive this parameter on the target page?
1. Configure routing:
{
path:'/detail/:id',
component: ( ) => import ''
}The configuration of this route will match:
/detail/7 => id:7 /detail/123 => id:123 /detail/abc => id:abc
vue will automatically encapsulate the path parameters and put them in this.$ property. This parameter can be obtained as follows:
mounted(){
let id = this.$
}List page: Fill in the router-link tag for list items
<template>
<tbody>
<tr v-for="(item, i) in " :key="">
<td>
<img :src="" width="60px"
@click="$(`/detail/${}`)">
</td>
</tr>
</tbody>
</template>router/configuration routing page:
{
paht: '/detail/:id',
name: 'detail',
component: ( ) =>import ('../')
}Details page:
<template>
<div>
<h2>Movie details page</h2>
<p>Movie name：{{}}</p>
<p>Movie Type：{{}}</p>
</div>
</template>
<script>
import myaxios from './http/MyAxios'
export default{
data( ){
return{
movieData:{ },//Bind movie object}
},
mounted( ){ //The current primary key has been mounted to the DOM and is automatically called by vue when it is (exposed).('The life cycle is mounted is called')
let id = this.$ //Receive path parameters: /detail/id parameter id('Received parameter id:' + id)
let url = "/bmdapi/movie-info/query"
(url,{ id }).then(res =>{
(res) //The movie object { } is stored in it =
})
}
};
</script>Summarize
This is the article about the two implementation methods of vue jumping to the details page. For more related contents of vue jumping to the details page, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!