vue手机商城项目实战（7）-商品详情组件实现

本文接：vue手机商城项目实战（6）-首页商品列表组件实现

1、由于商品详情是点击商品列表中的商品得以跳转实现，而商品详情组件也需要用到商品信息，因此可以通过共享商品的id然后去后台查询展示详情，或者直接将该商品所有的信息直接共享，为方便起见，我们这里直接使用后者方法。

2、在store\index.js的state中新增goodsDetail状态：

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

state:{
	// 商品详情
	goodsDetail:{}
}

3、在store\index.js的mutations中新增设置goodsDetail的setGoodsDetail方法：

mutations:{
	setGoodsDetail(state,goods){
		this.state.goodsDetail = goods;
	}
}

1、我们在router\index.js中新增商品详情的路由配置：

{
	name:"GoodsDetail",
	path:"/goodsdetail",
	component:()=>import('@/views/GoodsDetail.vue')
}

2、实现Goods.vue中之前尚未实现的goodsDetail方法：

methods:{
	goodsDetail(goods){
		// 提交详情
		this.$store.commit("setGoodsDetail",goods);
		// 跳转到详情页
		this.$router.push({name:"GoodsDetail"});
	}
}

1、上传一张暂无详情信息的图片到assets\img下
[dltable file=”暂无详情图” size=”12kb”]本地下载[/dltable]

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

立即访问

2、在views目录下新建GoodsDetail.vue组件，代码如下：
[v_blue]注意：添加购物车和利己购买方法暂不实现[/v_blue]