一、业务场景
如图，商品列表页（index.js）的数据和商品详情页（dish.js）的数据都是由请求数据接口动态获取的，点击商品列表的一项时，跳转到该商品的商品详情页面去
-
问题：在获取商品详情页（dish.js）的数据时，请求接口需要一个id的参数；点击一个商品项后，页面跳转到商品详情页（dish.js），在获取当前点击的商品列表页（index.js）的商品的id后，如何将id传到dish.js文件去呢
商品列表
商品详情
二、如何实现路由跳转wx.navigateTo的传参
页面跳转的api为wx.navigateTo（）；那wx.navigateTo()如何传参呢，在商品详情页又如何接收传过来的参数呢
1. wx.navigateTo（）页面传参
（1）index.wxml绑定点击事件和id参数
-
bindtap="openDishHandle"绑定点击事件 -
data-shopId="{{menuItem.id}}"绑定当前商品的shopid
<view class="menuItem" wx:for="{{productList}}" wx:key="index" bindtap="openDishHandle" data-shopId="{{menuItem.id}}">
（2） index.js传参
- e事件对象去获取shopid参数
-
wx.navigateTo（）传参在url地址后面跟上id的参数即可
// index.js
openDishHandle: function (e) {
console.log("e>>>", e);
const id = e.currentTarget.dataset.shopid;
console.log("id>>>", id);
// 路由跳转 打开新页面
wx.navigateTo({
url: '../dish/dish?id=' + id,
})
}
（3）dish.js接收参数
- 在页面加载生命周期函数中，options对象中会接收从上一个页面跳转传进来的参数
-
options打印结果
options对象
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// console.log("options>>", options);
const _this = this;
const id = options.id;
ShopApi.RequestShopFindApi( id, data => {
console.log("data>>>", data);
let product = data.resultInfo;
_this.setData({
product
})
})
},
