移动端商城——点击商品跳转到商品详情

也可以运用到快捷导航

情景：在商城中，点击a商品，跳转到该商品的详情页面，其中需要商品id作为参数

 商品链接

 商品详情

解决方案：

路由规则：

const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/goodsdes/:id',
            name:'goodsdes',
            component:()=>import('../views/GoodsDetails.vue')
        },
    ]
})

定义点击事件：在商品链接中添加点击事件，用户点击该商品的时候，传递参数

<!-- 猜你喜欢start -->
<div class="page-like">
  <van-divider  class="recommend" :style="{ color: '#c82519', borderColor: '#666', padding: '0 16px' }">猜你喜欢</van-divider>
  <div class="guess">
    <!-- 当用户点击这一商品时，触发点击事件jump，携带商品id作为参数 -->
    <div class="goods-item" v-for="(item) in goods.message" :key="item.id" @click="jump(item.id)">
      <div class="pic"><img :src="item.img_url" class="image"></div>
      <div class="price">
        <span class="new">￥{{item.sell_price}}</span>
        <span class="old">￥{{item.market_price}}</span>
      </div>
      <div class="title">{{item.title}}</div>
    </div>
  </div>
</div>
<!-- 猜你喜欢end -->

路由跳转：

vue2：

methods: {
  jump(id){
    this.$router.push('/goodsdes/' +id)
  }
}

vue3：

const jump=(id)=>{
   router.push('/goodsdes/' +id)
}