页面参数传递
基础参数传递（字符串/数字，通用所有跳转）
跳转页：url拼接参数
wx.navigateTo({
url: `/pages/detail/detail?id=1001&name=手机&price=3999`
})
接收页：在onLoad生命周期中通过options接收
Page({
onLoad(options) {
console.log('商品ID：', options.id)
console.log('商品名称：', options.name)
}
})
复杂对象传递（url传参失效解决方案）
问题：url无法直接传递对象，直接拼接会出现参数丢失、格式错乱
解决方案：JSON.stringify序列化 + encodeURIComponent编码
// 跳转页
const goodsInfo = { id:1001, name:"手机", list:[1,2,3] }
wx.navigateTo({
url: `/pages/detail/detail?goods=${encodeURIComponent(JSON.stringify(goodsInfo))}`
})
// 接收页
onLoad(options) {
const goods = JSON.parse(decodeURIComponent(options.goods))
console.log('完整商品对象', goods)
}
页面双向通信（EventChannel，返回页面传值）
适用场景：从B页面选择内容，返回A页面带回数据，替代全局变量
// A页面：跳转并监听返回数据
wx.navigateTo({
url: '/pages/select/select',
success: (res) => {
// 获取事件通道
const channel = res.eventChannel
// 监听B页面传回的数据
channel.on('sendDataBack', (data) => {
console.log('B页面返回的数据', data)
})
}
})
// B页面：返回时发送数据
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('sendDataBack', {value: '我是返回的内容'})
// 执行返回
wx.navigateBack()
路由使用场景选型（开发直接抄）
| 业务场景 | 推荐路由API |
|---|---|
| 列表打开详情、新开弹窗页面 | wx.navigateTo |
| 登录/启动页跳转首页，禁止返回 | wx.redirectTo |
| 自定义返回按钮、返回多层页面 | wx.navigateBack |
| 底部Tab栏相互切换 | wx.switchTab |
| 退出登录、强制清空所有页面 | wx.reLaunch |
高频坑点避坑指南（90%新手都会错）
坑1：navigateTo/redirectTo 无法跳转Tab页面
✅ 正确做法：Tab页面只能使用 switchTab / reLaunch 跳转
坑2：switchTab 不能携带url参数
✅ 解决方案：Tab页面数据通过全局变量app.js、缓存storage获取
坑3：页面栈超过10层跳转失败
✅ 解决方案：频繁跳转页面使用redirectTo替换页面，减少页面栈堆积
坑4：直接传递JSON对象导致参数丢失
✅ 解决方案：必须搭配encodeURIComponent和decodeURIComponent编码解码
坑5：redirectTo/reLaunch跳转后，无法返回之前页面
✅ 业务注意：登录、引导页这类无需返回的页面再使用，详情页不要乱用