路由传参常用方式有以下几种
-
通过url传参
// 产品列表页面 <navigator url="/pages/detail/detail?productId=12345" hover-class="navigator-hover">详情</navigator> // 或者 wx.navigateTo({ url: '/pages/detail/detail?productId=12345' })// 产品详情页面 Page({ onLoad: function(option){ let productId = option.productId; console.log(productId); } })上面的方式的参数不能是对象,如果需要传对象,可以将对象转成json字符串,然后拼接到url后面,在接收页面再将json字符串转成对象
let info = { a:2, b:3 } let infoStr = JSON.stringfy(info); wx.navigateTo({ url: '/pages/detail/detail?infoStr='+infoStr })// 产品详情页面 Page({ onLoad: function(option){ let infoStr = option.infoStr; let info = JSON.parse(infoStr); } })
-
通过事件传参
- 官网例子
// 产品列表页 wx.navigateTo({ url: url: '/pages/detail/detail' events: { // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据 acceptDataFromOpenedPage: function(data) { console.log(data) }, someEvent: function(data) { console.log(data) } ... }, success: function(res) { // 通过eventChannel向被打开页面传送数据 res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' }) } })// 产品详情页 Page({ onLoad: function(option){ const eventChannel = this.getOpenerEventChannel() eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'}); eventChannel.emit('someEvent', {data: 'test'}); // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据 eventChannel.on('acceptDataFromOpenerPage', function(data) { console.log(data) }) } })
- 简化例子
以上例子,在跳转的时候列表页可以向详情页传数据,详情页也可以向列表页传数据,平时我们经常都只是传数据,很少需要回传,以下是简化的例子
// 列表页
wx.navigateTo({
url: "/pages/home/detail/detail",
success: function(res) {
// 通过eventChannel向被打开页面传送数据
let data = {productId: 'sadf2323',productName:'金龙鱼花生油'};
res.eventChannel.emit("info", data);
}
});
// 详情页
onLoad: function(options) {
const eventChannel = this.getOpenerEventChannel();
// 监听info事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on("info", function(data) {
console.log(data);
});
},
总结: 路由传参可以用这两种方式
- 通过url拼接参数传输,需要传对象,需要传对象就先讲对象转成json字符串再传
- 通过eventChannel(事件通道)进行传输(可以传对象)
