微信小程序路由跳转详解1. 微信小程序页面跳转的基本方法微信小程序提供了多种页面跳转方式，可以根据具体需求选择不同的跳

测试小姐姐：bug来咯，为什么你这个页面跳转几次后就不跳了？

我：不可能，绝对不可能。

测试小姐姐：是真的，你看看这个页面，多跳几次就再也跳不了了。

我：好的，那我看看这个神奇的bug。

还好小程序提供接口调用失败的回调函数fail，默默打开控制台，一看打印，原来是页面栈溢出了。默默将navigateTo改成redirectTo

我：小姐姐，你再试试，奇迹再现。

有一段时间没有写小程序了，都快忘了页面跳转的知识点了。痛定思痛，立刻进修一波页面跳转知识点。

1. 微信小程序页面跳转的基本方法

微信小程序提供了多种页面跳转方式，可以根据具体需求选择不同的跳转方法。主要的跳转方式包括：navigateTo、redirectTo、reLaunch、switchTab、navigateBack 。

1.1 `navigateTo`

功能：保留当前页面，跳转到应用内的某个页面。
适用场景：一般用于从一个页面跳转到另一个页面（例如从列表页跳转到详情页），并且可以返回到当前页面。

wx.navigateTo({
  url: '/pages/detail/detail?id=123',  // 跳转目标页面的路径（可以携带参数）
})

参数：

url: 要跳转的页面路径（必填），可以包含查询参数（例如：/pages/detail/detail?id=123）。
success: 跳转成功后的回调函数。
fail: 跳转失败后的回调函数。
complete: 跳转完成后的回调函数。

注意：

最多只能打开 10 层页面栈（即最多能跳转 10 次）。超过此限制时会提示navigateTo:fail webview count limit exceed

1.2 `redirectTo`

功能：关闭当前页面，跳转到应用内的某个页面。
适用场景：需要在跳转时关闭当前页面的场景，例如登录成功后跳转到首页，或者在完成某些操作后跳转。

wx.redirectTo({
  url: '/pages/home/home',  // 跳转目标页面的路径
})

参数：

url: 要跳转的页面路径（必填），可以携带查询参数。
success, fail, complete: 同 navigateTo。

注意：

该方法不会保留当前页面，跳转后无法返回。

1.3 `reLaunch`

功能：关闭所有页面，打开到应用内的某个页面。
适用场景：适用于需要关闭所有页面并启动新的页面的场景，如退出登录时清空历史页面栈，直接跳转到登录页。

wx.reLaunch({
  url: '/pages/login/login',  // 跳转目标页面的路径
})

参数：

url: 要跳转的页面路径（必填）。
success, fail, complete: 同 navigateTo。

注意：

该方法关闭所有页面，适用于彻底切换场景。

1.4 `switchTab`

功能：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
适用场景：一般用于跳转到小程序的 tab 页，如跳转到“首页”、“我的”等 tab 页。

wx.switchTab({
  url: '/pages/home/home',  // tab 页页面路径
})

参数：

url: tab 页的路径（必填），路径必须是 tabBar 配置中的页面路径。
success, fail, complete: 同 navigateTo。

注意：

只能跳转到 app.json 中定义的 tabBar 页面。

1.5 `navigateBack`

功能：返回上一个页面。
适用场景：用于用户操作完成后返回上一个页面。

wx.navigateBack({
  delta: 1,  // 返回的层数，默认是 1
})

参数：

delta: 返回的页面数，默认为 1。如果需要返回两层，可以传入 2。
success, fail, complete: 同 navigateTo。

注意：

页面栈最多支持 10 层，所以最多可以返回 10 层。

2. 页面跳转携带参数

在跳转页面时，可以通过 url 参数携带查询字符串（即 URL 中的参数）。这些参数可以在目标页面中通过 onLoad 方法获取。

2.1 跳转时携带参数

wx.navigateTo({
  url: '/pages/detail/detail?id=123&name=John',
})

2.2 获取参数

在目标页面的 onLoad 方法中，可以通过 options 参数获取传递的参数。

Page({
  onLoad(options) {
    console.log(options.id);  // 123
    console.log(options.name);  // John
  }
})

options 是一个对象，包含 URL 中的所有查询参数。

2.3 参数编码与解码

参数中可能包含特殊字符（如 &, =, ? 等），为了避免这些字符干扰 URL 解析，可以使用 encodeURIComponent() 对参数进行编码，并在接收端使用 decodeURIComponent() 解码。

// 编码
let url = '/pages/detail/detail?name=' + encodeURIComponent('张三') + '&id=123';

// 解码
let name = decodeURIComponent(options.name);

3. 页面跳转中的注意事项

3.1 页面栈管理

微信小程序有一个页面栈（Page Stack），它记录了打开的页面。在开发过程中，需要注意以下几点：

栈大小限制：微信小程序最多支持 10 层页面栈。如果页面栈满了，后续页面跳转将会失败。
跳转方式：使用不同的跳转方法时，页面栈的处理方式不同。例如，navigateTo 会将目标页面压入栈中，而 redirectTo 会将当前页面从栈中移除，reLaunch 会清空栈，使用 switchTab 会关闭非 tabBar 页面，使用 navigateBack 会返回上一个页面，并从栈中弹出当前页面。

3.2 页面栈溢出

微信小程序的页面栈最大支持 10 层，如果超出这个限制，会导致页面跳转失败，开发者应避免页面跳转过多，造成页面栈溢出。

3.3 页面传递参数的限制

跳转时传递的参数有一定长度限制，超出限制可能会导致跳转失败或无法正确传递数据。为了避免问题，尽量将参数简化为小型数据，或者通过eventChannel事件来和被打开的页面进行通信。

1. 在当前页面发起跳转并传递数据

在当前页面（例如页面 A）中，你可以通过 wx.navigateTo 或 wx.redirectTo 跳转到目标页面，并使用 eventChannel 传递数据。

// 页面 A 中
Page({
  navigateToPageB: function() {
    wx.navigateTo({
      url: '/pages/pageB/pageB',
      events: {
        // 为指定事件添加监听器
        acceptDataFromOpenedPage: function(data) {
          console.log('从页面B接收到的数据:', data);
        }
      },
      success: function(res) {
        // 通过eventChannel向被打开页面传递数据
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: '这是从页面A传递的数据' });
      }
    });
  }
});

在目标页面（例如页面 B）中，你可以通过 this.getOpenerEventChannel() 获取到 eventChannel 实例，然后通过 on 方法监听从前一个页面传来的数据。

// 页面 B 中
Page({
  onLoad: function(options) {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log('从页面A接收到的数据:', data);
 });

    // 向打开页面B的页面A发送数据
    eventChannel.emit('acceptDataFromOpenedPage', { data: '这是从页面B回传的数据' });
  }
});

4. 页面跳转和生命周期

微信小程序的页面具有生命周期，在进行页面跳转时，可能会影响页面的生命周期。

onLoad：页面加载时触发。每次页面跳转时，目标页面会触发 onLoad 方法。
onShow：页面显示时触发。每次跳转到该页面时都会触发（包括从后台返回前台）。
onHide：页面隐藏时触发。当跳转到其他页面或当前页面被覆盖时触发。
onUnload：页面销毁时触发。通常用于清理资源、注销事件监听等。

5. 总结

API	功能描述	是否保留原页面	目标页面限制
`wx.navigateTo`	保留当前页面，跳转到应用内的某个页面	是	不能跳到 tabbar 页面
`wx.redirectTo`	关闭当前页面，跳转到应用内的某个页面	否	不能跳到 tabbar 页面
`wx.switchTab`	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面	否	只能跳转到 tabbar 页面
`wx.reLaunch`	关闭所有页面，打开到应用内的某个页面	否	无限制
`wx.navigateBack`	关闭当前页面，返回上一页面或多级页面	否	无限制，但用于返回操作

跳转速度：如果频繁进行页面跳转，可能会导致性能问题。可以通过防抖、节流等方式来避免重复点击或频繁跳转。
路径错误：确保跳转的路径正确，路径错误可能导致跳转失败。
返回页面时的处理：在 navigateBack 或其他返回操作时，需要确保返回的页面能够正确恢复之前的状态。
页面跳转携带数据：当需要携带大数据时推荐使用 EventChannel 进行传递。
页面栈溢出：使用wx.navigateTo的时候注意页面栈溢出情况。

微信小程序路由跳转详解