Parameter passing during routing jump
Business scenario : Click the name of an item on the movie list page to jump to the movie details page to view the detailed information of the selected movie. This process needs to pass the movie ID as a parameter while jumping, so that the details page can get the ID of the selected item, so as to send a request to query detailed information.
1. Prepare a movie list page: List.vue and a movie details page: Detail.vue
2. Configure routing:
a. When visiting the address: http://localhost:8080/list, you will see the list page.
b. When visiting the address: http://localhost:8080/detail, you will see the details page.
3. Note: placeholders need to be added to App.vue:
Parameter passing method in routing jump process 1
Pass parameters by concatenating the query string with ? after the resource path is requested :
<router-link to="/detail?id=7&name=zs">xx</router-link>
Method 1: Question mark version
List.vue list page: fill in the router-link tag for list items
<template>
<tbody>
<tr v-for="(item, i) in data.result" :key="item.id">
<td>
<router-link :to="`/detail?id=${item.id}`">//问号版的
{
{
item.title}}
</router-link>
</td>
</tr>
</tbody>
</template>
detail.vue details page:
<template>
<div>
<h2>电影详情页</h2>
<p>电影名称：{
{
movieDate.title}}</p>
<p>电影类型：{
{
movieData.type}}</p>
</div>
</template>
<script>
import myaxios from './http/MyAxios'
export default{
data( ){
return{
movieData:{
},//绑定电影对象
}
},
mounted( ){
//当前主键已经挂载到DOM上，（已展示）时被vue自动调用
console.log('生命周期方发mounted被调用')
let id = this.$router.query.id //接收请求路径后的 ？key= value 格式的参数id
console.log('接收到参数id:' + id)
let url = "https://web.codeboy.com/bmdapi/movie-info/query"
myaxios.get(url,{
id }).then(res =>{
console.log(res) //res.data.data中存储了电影对象{ }
this.movieDate = res.data.data
})
}
};
</script>
Method 2: version without question mark
<router-link to="/detail/7">xx</router-link>
this.$router.push('/detail/7')
How does the target page receive this parameter?
1. Configure routing:
{
path:'/detail/:id',
component: ( ) => import 'Detail.vue'
}
The configuration of this route will match:
/detail/7 => id:7
/detail/123 => id:123
/detail/abc => id:abc
Vue will automatically encapsulate path parameters and put them into the this.$route.params property. This parameter can be obtained as follows:
mounted(){
let id = this.$route.params.id
}
List.vue list page: fill in the router-link tag for list items
<template>
<tbody>
<tr v-for="(item, i) in data.result" :key="item.id">
<td>
<img :src="item.cover" width="60px"
@click="$router.push(`/detail/${item.id}`)">
</td>
</tr>
</tbody>
</template>
router/index.js configuration routing page:
{
paht: '/detail/:id',
name: 'detail',
component: ( ) =>import ('../Detail.vue')
}
detail.vue details page:
<template>
<div>
<h2>电影详情页</h2>
<p>电影名称：{
{
movieDate.title}}</p>
<p>电影类型：{
{
movieData.type}}</p>
</div>
</template>
<script>
import myaxios from './http/MyAxios'
export default{
data( ){
return{
movieData:{
},//绑定电影对象
}
},
mounted( ){
//当前主键已经挂载到DOM上，（已展示）时被vue自动调用
console.log('生命周期方发mounted被调用')
let id = this.$router.params.id //接收路径参数： /detail/id 格式的参数id
console.log('接收到参数id:' + id)
let url = "https://web.codeboy.com/bmdapi/movie-info/query"
myaxios.get(url,{
id }).then(res =>{
console.log(res) //res.data.data中存储了电影对象{ }
this.movieDate = res.data.data
})
}
};
</script>