在列表向详情页面跳转,而后在详情页面查看列表的详情信息,此时设计路由传参,vue中有3种传参形式,介绍如下:
<div class="action-btn" @click="viewDetails(item.id)">查看详情</div>
一、path形式
methods:{
viewDetails(id) {
//直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/particulars/${id}`,
})
}
此方法,会将参数直接拼接在URL上面,需要在路由文件中配置动态路由,具体的配置如下:
{
path: '/orderDetails/:id',
name: 'orderDetails',
component: orderDetails
}
另外,在详情页面orderDetails.vue中可以通过 this.$route.params.id 来获取传递的参数,具体如下:
created(){
this.orderId = this.$route.params.id;
}
二、name + params形式
methods:{
viewDetails(id) {
this.$router.push({
name: 'orderDetails',
params: {
id: id
}
})
}
此方法,不会将参数直接拼接在URL上面,在路由配置的时候,不需要使用动态路由配置,具体如下:
{
path: '/orderDetails',
name: 'orderDetails',
component: orderDetails
}
另外,在详情页面orderDetails.vue中可以通过 this.$route.params.id 来获取传递的参数,具体如下:
created(){
this.orderId = this.$route.params.id;
}
缺点:页面刷新会产生数据丢失的问题。
三、path + query形式
methods:{
viewDEtails(id) {
this.$router.push({
path: '/orderDetails',
query: {
id: id
}
})
}
此方法,会将参数拼接到URL上面,并且使用 key=value 的形式,对应的路由不需要配置成动态路由,具体如下:
{
path: '/orderDetails',
name: 'orderDetails',
component: orderDetails
}
另外,在详情页面 orderDetails.vue 中可以通过 this.$route.query.id 来获取传递的参数,具体如下:
created(){
this.orderId = this.$route.query.id;
}