vue中项目列表跳转项目详情页
最近有人问我一个问题vue中怎样传id1.首先列表页:在我们渲染列表页数据的时候,每条数据中都会有个id,这是他们唯一的标识,列表循环是我们取到他的id放到我们的点击事件中。html<div class="studaylist clearfix"v-for="(item,i) in list" :key="i">...
·
最近有人问我一个问题vue中怎样传id
1.首先列表页:在我们渲染列表页数据的时候,每条数据中都会有个id,这是他们唯一的标识,
列表循环是我们取到他的id放到我们的点击事件中。
html
<div class="studaylist clearfix" v-for="(item,i) in list" :key="i">
<span @click="signup(item.id)">
报名
</span>
</div>
methods
signup(id){
this.$router.push({path:"/coursedetails/"+id}) // 跳转的详情页面拼接id
},
router中加上 /:id
我的路由是单独放一个文件中的但是不影响你们·使用
{
path: '/coursedetails/:id', // 记得此处拼接id
name: 'coursedetails',
component: () => import('../pages/groupbuy/coursedetails.vue'),
meta:{
title:'课程详情页'
}
},
详情页,
在详情页我们只需要接收列表页传过来的id就行了
return{
id:this.$route.params.id, //这样我们的id就拿到了然后在接口处拼接
}
详情页请求接口的后面拼接+this.id 此处id是从列表页传过来的id 这样就Ok了
axios.get('course/info/'+this.id).then(res=>{
})
这种写法我平时经常用到,当然还有其他写法,在此把我平时用的分享给大家。
如果有问题,可以加我微信一起讨论,我们一起进步!
屏幕前的你,加油!
更多推荐
已为社区贡献11条内容
所有评论(0)