小程序中如何实现页面跳转？请列举两种方式并说明区别

题目

小程序中如何实现页面跳转？请列举两种方式并说明区别

信息

• 类型：问答
• 难度：⭐

考点

页面路由, wx.navigateTo与wx.redirectTo的区别, 小程序基础API

快速回答

小程序页面跳转的两种主要方式：

• wx.navigateTo：保留当前页面，跳转到新页面（可返回）
• wx.redirectTo：关闭当前页面，跳转到新页面（不可返回）

核心区别：页面栈管理方式不同，影响用户返回行为。

解析

原理说明

小程序使用页面栈管理页面层级（最多10层）：
• wx.navigateTo 将新页面压入栈顶
• wx.redirectTo 替换当前栈顶页面
• 用户点击返回按钮时，系统弹出栈顶页面

代码示例

// 方式1：保留当前页面（可返回）
wx.navigateTo({
  url: '/pages/detail/detail?id=123'
})

// 方式2：关闭当前页面（不可返回）
wx.redirectTo({
  url: '/pages/login/login'
})

最佳实践

• 常规页面跳转（如列表→详情）使用 wx.navigateTo
• 登录页/支付页等场景使用 wx.redirectTo 避免回退到敏感页面
• 传递参数通过URL拼接（?key=value），目标页在 onLoad 中通过 options 接收

常见错误

• 误用 redirectTo 导致用户无法返回上级页面
• URL未写完整路径（需以 / 开头）
• 页面栈超过10层导致跳转失败（需用 redirectTo 或 reLaunch 控制层级）

扩展知识

• wx.switchTab：跳转tabBar页面并关闭其他非tab页面
• wx.reLaunch：关闭所有页面打开新页面
• 获取当前页面栈：getCurrentPages()
• 页面生命周期：跳转时原页面触发 onHide，返回时触发 onShow