最近有人问我一个问题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=>{
 
})

这种写法我平时经常用到,当然还有其他写法,在此把我平时用的分享给大家。

如果有问题,可以加我微信一起讨论,我们一起进步!
屏幕前的你,加油!
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐