微信小程序使用wx.navigateTo路由跳转层级限制问题小结

wx.redirectTo 和 wx.navigateTo 的区别

wx.navigateTo

• 作用：打开一个新页面并保留当前页面在页面栈中。
• 页面栈限制：最多只能存在 10 层页面。如果层级超过 10 层，则无法跳转并会抛出错误。
• 场景：适合用户从一个页面跳转到另一个页面，并且可能返回到之前的页面（如详情页返回到列表页）。

示例：

wx.navigateTo({
  url: '/pages/home/lineView/index',
  fail: (err) => console.error('页面层级超限：', err),
});

wx.redirectTo

• 作用：关闭当前页面并跳转到指定页面，不会保留当前页面在页面栈中。
• 页面栈限制：因为是关闭当前页面，不会叠加页面栈层级，因此可以避免层级限制。
• 场景：适合在不需要返回的场景中使用（如登录成功后跳转到主页）。

示例：

wx.redirectTo({
  url: '/pages/home/lineView/index',
});

• 页面栈层级超过 10 层会出现的问题： 如果使用 wx.navigateTo 打开新页面，当页面栈层级超过 10 层时，会报错并跳转失败，你需要通过一些手段避免超过层级限制。
• 解决方法：
  • 使用 wx.redirectTo：在某些无需返回的页面中避免层级增加。
  • 使用 wx.switchTab：如果跳转的页面是 Tab 页，可以用此方法，不会受页面栈的层级限制。

wx.reLaunch：清空所有页面栈并跳转到新的页面。

总结：

• wx.navigateTo：保留当前页面，可以返回，但层级限制为 10。
• wx.redirectTo：替换当前页面，无层级限制。
• 如果页面栈层级达到上限，建议使用 wx.redirectTo 或 wx.reLaunch 来避免错误。