Vue实现商品详情

Vue实现商品详情页的步骤

搭建基本结构 使用Vue CLI或Vite创建项目，安装必要依赖如vue-router、axios。创建商品详情组件GoodsDetail.vue，配置路由参数传递商品ID。

获取商品数据 在created或mounted钩子中通过axios调用API接口，使用$route.params获取商品ID作为参数。处理异步请求时建议配合async/await。

async fetchGoodsDetail() {
  try {
    const res = await axios.get(`/api/goods/${this.$route.params.id}`)
    this.goodsInfo = res.data
  } catch (error) {
    console.error('获取商品详情失败', error)
  }
}

渲染商品信息 使用v-if判断数据加载状态，通过模板展示商品图片、名称、价格等核心信息。图片建议使用懒加载优化性能。

<div v-if="goodsInfo">
  <img v-lazy="goodsInfo.mainImage" alt="商品主图">
  <h3>{{ goodsInfo.name }}</h3>
  <p class="price">¥{{ goodsInfo.price }}</p>
</div>
<div v-else>加载中...</div>

实现交互功能 添加购物车按钮绑定点击事件，调用Vuex action或直接发送API请求。规格选择使用v-for渲染SKU列表，通过v-model绑定选中状态。

methods: {
  addToCart() {
    this.$store.dispatch('cart/addItem', {
      id: this.goodsInfo.id,
      quantity: this.selectedQuantity
    })
  }
}

优化用户体验 添加图片预览组件实现放大镜效果，使用keep-alive缓存组件。路由切换时添加加载动画，错误处理显示友好提示。

<transition name="fade">
  <goods-gallery v-if="showGallery" :images="goodsInfo.images"/>
</transition>

SEO优化 对于需要SEO的场景，可使用SSR方案如Nuxt.js。静态页面部署考虑使用预渲染技术，在页头添加合适的meta标签。

<meta name="description" :content="goodsInfo.description">

关键注意事项

• 接口数据需做XSS防护，避免v-html直接渲染未处理的内容
• 移动端需考虑300ms点击延迟问题，可引入fastclick库
• 价格显示使用过滤器统一格式化，确保小数点后两位
• 高并发场景考虑实现本地缓存策略，减少API请求