vue路由组件传参params组件传参下面是id传参本人亲测过成功啦

@接下来是我通过路由组件parmas组件传参 以及id接收传参内容

接下来是我通过路由组件parmas组件传参 以及id接收传参内容

先是在router.js 也就是路由组件里面编写这个代码

// An highlighted block
{
    
    
    path: '/list/:id',
    name: 'list',
    component: () => import('@/views/List.vue')
}

然后在需要传id的组件中传参，接下来是我的组件代码

// 这里是上面的代码 重点看：goList(item.id) 我在这里给geList传参
<van-card
      v-for="(item, index) in finallygoodsList"
      @click="goList(item.id)"
      :key=""
      num="2"
      :tag="item.isHot === true ? '新品' : ''"
      :price="item.retailPrice"
      :title="item.brief"
      :thumb="item.picUrl"
      :origin-price="item.counterPrice"
/>

//这里是methods代码
methods: {
    
    
	goList(item) {
    
    
	     this.id = item
	     // console.log(item)
	     this.$router.push({
    
     
	       path: `/list/${
      
      this.id}`
	})
}

然后再需要接收id值的组件中用parmas接收

<script>
data() {
    
    
    return {
    
    
      id: this.$route.params.id   // 然后这里的id 就接收到值啦！
    }
  }
</script>