💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
实现思路: 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)