微信小程序开发教程-页面跳转-编程式导航高级部分-马育民老师

# 页面参数传递

### 基础参数传递（字符串/数字，通用所有跳转）

跳转页：url拼接参数

```javascript
wx.navigateTo({
  url: `/pages/detail/detail?id=1001&name=手机&price=3999`
})
```

接收页：在onLoad生命周期中通过options接收

```javascript
Page({
  onLoad(options) {
    console.log('商品ID：', options.id)
    console.log('商品名称：', options.name)
  }
})
```

### 复杂对象传递（url传参失效解决方案）

问题：url无法直接传递对象，直接拼接会出现参数丢失、格式错乱

解决方案：JSON\.stringify序列化 \+ encodeURIComponent编码

```javascript
// 跳转页
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页面带回数据，替代全局变量

```javascript
// 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跳转后，无法返回之前页面

✅ 业务注意：登录、引导页这类无需返回的页面再使用，详情页不要乱用

原文出处：http://malaoshi.top/show_1GW3XNsuw02q.html