vue中项目列表跳转项目详情页

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

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

如果有问题，可以加我微信一起讨论，我们一起进步！
屏幕前的你，加油！