用vue写出vantcard商品信息，点击能跳转到商品详情页面

以下是一个基于Vue框架和Vant组件库的示例代码，使用Vant的Card组件展示商品信息，点击Card可以跳转到商品详情页面：

<template>
  <div>
    <van-card
      v-for="item in goodsList"
      :key="item.id"
      :thumb="item.thumb"
      :title="item.name"
      :price="item.price"
      :num="item.num"
      @click="gotoGoodsDetail(item.id)"
    >
      <template #tag>
        <van-tag
          v-for="(tag, index) in item.tags"
          :key="index"
          type="danger"
        >
          {{ tag }}
        </van-tag>
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsList: [
        {
          id: 1,
          name: "商品1",
          thumb: "https://dummyimage.com/300x300/ccc/000",
          price: 100,
          num: 10,
          tags: ["标签1", "标签2"],
        },
        {
          id: 2,
          name: "商品2",
          thumb: "https://dummyimage.com/300x300/ccc/000",
          price: 200,
          num: 5,
          tags: ["标签1", "标签3"],
        },
        {
          id: 3,
          name: "商品3",
          thumb: "https://dummyimage.com/300x300/ccc/000",
          price: 300,
          num: 2,
          tags: ["标签2", "标签3"],
        },
      ],
    };
  },
  methods: {
    gotoGoodsDetail(id) {
      // 跳转到商品详情页面，参数为商品id
      this.$router.push(`/goods/${id}`);
    },
  },
};
</script>

在上述代码中，我们使用了Vant的Card组件展示了商品信息，并为其绑定了点击事件。点击Card时会调用gotoGoodsDetail方法进行路由跳转，跳转到商品详情页面，其中参数为商品id。