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

# 介绍

开发中90%场景使用编程式导航，可在跳转前增加登录判断、弹窗提示、接口请求等逻辑。下面逐个讲解API、适用场景、完整代码。

### wx.navigateTo：保留当前页，跳转非Tab新页面

**场景**：列表→详情、个人中心→设置、弹窗页面

**特点**：页面栈\+1，左上角自带返回箭头，**不能跳转Tab页面**

```javascript
Page({
  // 点击按钮跳转
  goDetail() {
    wx.navigateTo({
      url: '/pages/detail/detail?id=10086&title=商品详情',
      success: () => console.log('跳转成功'),
      fail: () => console.log('跳转失败'),
      complete: () => console.log('跳转调用完成')
    })
  }
})
```

### wx.redirectTo：关闭当前页，跳转新页面

**场景**：登录成功跳转首页、启动页跳转首页（不需要返回上一页）

**特点**：当前页面直接被替换，无法返回被关闭的页面，减少页面栈堆积

```javascript
loginSuccess() {
  // 登录成功，关闭登录页，跳转到首页，无法返回登录页
  wx.redirectTo({
    url: '/pages/index/index'
  })
}
```

### wx.navigateBack：返回之前页面（逆向跳转）

**场景**：自定义返回按钮、返回多层页面

**参数delta**：返回的页面层数，delta:1返回上一页，delta:2返回上两页，delta不传默认1

```javascript
// 返回上一页
goBack1() {
  wx.navigateBack({ delta: 1 })
},
// 返回首页（直接退出多层页面）
goBackIndex() {
  wx.navigateBack({ delta: 3 })
}
```

注意：delta值不能超过当前页面栈层数，否则返回失效。

### wx.switchTab：专门跳转Tabbar页面

**场景**：底部Tab栏切换（首页、分类、我的）

**硬性规则**：

1. url必须是app\.json中注册的tabBar页面
  
2. **不支持url拼接参数**
  
3. 会关闭所有非tabbar页面

```javascript
switchMine() {
  wx.switchTab({
    url: '/pages/mine/mine'
  })
}
```

### wx.reLaunch：关闭所有页面，跳转任意页面

**场景**：退出登录回到首页、清空所有页面栈强制跳转

**特点**：页面栈直接清空，无返回按钮，可跳转Tab/非Tab页面

```javascript
logout() {
  // 退出登录，清空所有页面，回到首页
  wx.reLaunch({
    url: '/pages/index/index'
  })
}
```

### 使用场景选型

| 业务场景 | 推荐路由API |
| --- | --- |
| 列表打开详情、新开弹窗页面 | wx\.navigateTo |
| 登录/启动页跳转首页，禁止返回 | wx\.redirectTo |
| 自定义返回按钮、返回多层页面 | wx\.navigateBack |
| 底部Tab栏相互切换 | wx\.switchTab |
| 退出登录、强制清空所有页面 | wx\.reLaunch |

---

# 避坑

### 坑：navigateTo/redirectTo 无法跳转Tab页面

✅ 正确做法：Tab页面只能使用 **switchTab / reLaunch** 跳转

### 坑：页面栈超过10层跳转失败

✅ 解决方案：频繁跳转页面使用redirectTo替换页面，减少页面栈堆积

### 坑：redirectTo/reLaunch跳转后，无法返回之前页面

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

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