实现思路:
1. 在首页点击商品时,要把商品的ID传到详情页
2. 在详情页接收商品ID,并使用这个ID调用商品详情的接口,获取这件商品的详情信息
3. 把信息显示在页面中
# 首页传商品ID到商品详情页
在页面之间传参数有至少两种方法:
1. 在 ? 后面传,比如: /goods?id=12
接收:在下一个页面中使用 `this.$route.query.id`
2. 在路径上传,比如:/goods/12
a. 要修改路由从 '/goods' 改成 '/goods/:id`
b. 接收:在下一个页使用 `this.$route.params.id`
使用第一种:
![](https://img.kancloud.cn/ef/b6/efb62b3953a2c2e893b3c85013792bff_2252x1272.png)
# 在详情页中接收ID,并使用ID调用接口获取商品的详情
![](https://img.kancloud.cn/67/4d/674d0c44765210d5475be06d7d168219_1632x936.png)
测试一下:
![](https://img.kancloud.cn/11/b2/11b2c597c91863236cc41a36106ea8d3_2430x1068.png)
# 把商品信息显示在页面上
## 显示轮播图片:
![](https://img.kancloud.cn/8a/5c/8a5ca02823740d150b1700032e8c084b_1644x620.png)
## 轮播图片下面的数字跟着改变:
![](https://img.kancloud.cn/e3/3e/e33e954ba48d63a2808a8649522362f7_2614x736.png)
## 商品介绍
在显示商品描述的信息时,因为内容是原始的 HTML 代码,所以在显示时需要使用 `v-html` 指令来显示:
![](https://img.kancloud.cn/01/e0/01e0c5eae463917181f0d0aedba4541d_2812x1276.png)