做一个商城app的前端的点击商品跳转hbuilderx的vue代码实现

在HBuilderX（DCloud）中使用Vue.js开发商城App时，如果你想要实现商品列表页的商品点击事件，可以按照以下步骤编写代码：

<!-- 商品列表项模板 -->
<template>
  <li class="product-item" v-for="(item, index) in products" :key="index">
    <a @click="viewProduct(item)" href="#">{{ item.name }}</a> <!-- 点击触发viewProduct方法 -->
    <img :src="item.image" alt="{{ item.name }}">
    <p>{{ item.price }}元</p>
  </li>
</template>

<script setup>
import { ref } from 'vue';

// 假设从服务器获取的商品数据
const products = ref([{ name: '商品A', image: 'imageA.jpg', price: '99元' }, ...]); // 更多商品

function viewProduct(product) {
  // 使用路由跳转到商品详情页面，并传递商品信息
  const router = useRouter(); // 获取HBuilderX的内置路由API
  router.push(`/product/${product.id}`, product); 
  // 或者直接跳转到详情组件
  // router.replace(`/product/${product.id}`, product);
}
</script>

<style scoped>
.product-item {
  /* 样式 */
}
</style>

这个例子中，我们创建了一个商品列表，每个商品链接绑定了`viewProduct`方法，当用户点击商品时，会调用这个方法并传入对应的商品对象。`viewProduct`方法通常会在路由系统中导航到商品详情页，将商品数据作为参数传递。