vue实现商品页面
实现商品页面的基本结构
使用Vue框架搭建商品页面，通常需要以下核心组件：商品展示区、商品详情、购物车操作等。通过Vue的单文件组件（SFC）模式组织代码，结合Vue Router实现页面路由，Vuex管理状态（如购物车数据）。
<template>
<div class="product-page">
<product-header :title="product.name" />
<product-gallery :images="product.images" />
<product-info
:price="product.price"
:stock="product.stock"
@add-to-cart="handleAddToCart"
/>
<product-details :description="product.description" />
</div>
</template>商品数据管理与API交互
通过Vue的data或Vuex存储商品数据，使用axios或fetch从后端API获取数据。示例中通过异步请求加载商品信息：
<script>
export default {
data() {
return {
product: {}
};
},
async created() {
const response = await fetch('/api/product/123');
this.product = await response.json();
},
methods: {
handleAddToCart() {
this.$store.dispatch('cart/addItem', this.product);
}
}
};
</script>动态路由与参数传递
通过Vue Router的动态路由匹配商品ID，实现不同商品的页面渲染。在路由配置中定义参数：
// router.js
{
path: '/product/:id',
component: ProductPage,
props: true // 将路由参数作为props传递
}页面组件通过props接收参数并加载对应商品数据：
props: ['id'],
async created() {
const response = await fetch(`/api/product/${this.id}`);
this.product = await response.json();
}样式与布局优化
使用CSS或SCSS编写模块化样式，结合Vue的scoped样式避免污染全局样式。示例中使用Flexbox布局商品展示区：
<style scoped>
.product-page {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.product-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
</style>交互功能实现
添加购物车、收藏等交互功能，通过Vuex管理全局状态。示例中定义Vuex的cart模块：
// store/modules/cart.js
export default {
state: {
items: []
},
mutations: {
ADD_ITEM(state, product) {
state.items.push(product);
}
},
actions: {
addItem({ commit }, product) {
commit('ADD_ITEM', product);
}
}
};响应式设计适配
通过媒体查询实现移动端适配，确保商品页面在不同设备上正常显示。示例中调整图片布局：
@media (max-width: 768px) {
.product-gallery {
grid-template-columns: 1fr;
}
}
