最近在做一个项目涉及到列表到详情页的参数的传递，网上搜索一下路由传参，结合自己的写法找到一种适合自己的，不过也对三种写法都有了了解，在此记录一下
<ul class="table_info" v-for="item in customeLsit">
<li>{{item.name}}</li>
<li>{{item.phone}}</li>
<li>{{item.date}}</li>
<li class="detail" @click="customeDetail(item.id)">详情</li>
这是列表页面，需要传递参数到详情页，下面给出三种方法
方法一：直接在路由路径后面加参数
customeDetail(id){
console.log('id',id);
this.$router.push({
path:'/custome/customeDetailPage/${id}',
})
},
需要对应路由配置如下：
{
path:'/custome/customeDetailPage/:id',
component:CDetailPage
},
//需要在path中添加/:id来对应参数
//详情页获取传递的参数
methods:{
getParams(){
let routerParams = this.$route.params.id;
this.customId = routerParams;
console.log('id',routerParams);
},
},
created(){
this.getParams()
}
方法二:利用name属性来匹配路由，然后通过params传递参数
//列表页面传参数
customeDetail(id){
console.log('id',id);
this.$router.push({
name:'CDetailPage', //注意一定要用name属性匹配路由
params:{
dataObj:id
}
})
},
//对应路由配置
{
path:'/custome/customeDetailPage',
name:'CDetailPage',
component:CDetailPage
},
//详情页面接收参数
methods:{
getParams(){
let routerParams = this.$route.params.dataObj;
this.customId = routerParams;
console.log('id',routerParams);
}, },
created(){
this.getParams()
}
第三种方法：通过path匹配路由，然后通过query传递参数
//列表页面传参
customeDetail(id){
console.log('id',id);
this.$router.push({
path:'/custome/customeDetailPage',
query:{
name:'id',
dataObj:id
}
})
},
//路由配置，name属性可有可无
{
path:'/custome/customeDetailPage',
component:CDetailPage
}, //我写的时候是没有用name属性
//详情页获取属性
methods:{
getParams(){
let routerParams = this.$route.query.dataObj;
this.customId = routerParams;
console.log('id',routerParams);
}, },
created(){
this.getParams()
}
这是query传参是路由显示的参数