网站内部资源推广案例微信开发者工具官方文档

在UniApp中，路由跳转是实现页面导航的核心功能，常见的路由跳转方式包括navigateTo、redirectTo、reLaunch、switchTab和navigateBack。这些方法在跳转行为和适用场景上有所不同。

一、路由跳转的类型与区别

1. uni.navigateTo(OBJECT)

• 特点：
  • 保留当前页面，跳转到应用内的某个页面。
  • 可以通过 uni.navigateBack() 返回上一个页面。
  • 会生成新的页面实例，页面栈最多十层。
• 限制：
  • 不能跳转到 tabBar 页面。
  • 页面栈超过十层后无法继续跳转。
• 应用场景：
  • 适合需要返回操作的页面跳转，如从列表页跳转到详情页。

2. uni.redirectTo(OBJECT)

• 特点：
  • 关闭当前页面，跳转到应用内的某个页面。
  • 无法通过返回按钮回到上一个页面。
  • 会销毁当前页面实例，减少内存占用。
• 限制：
  • 同样不能跳转到 tabBar 页面。
• 应用场景：
  • 登录成功后跳转到主页，防止用户返回登录页。
  • 表单提交成功后跳转到结果页。

3. uni.reLaunch(OBJECT)

• 特点：
  • 关闭所有页面，打开应用内的某个页面。
  • 页面栈会被清空，只剩新打开的页面。
  • 无论从哪个页面跳转，结果页的返回逻辑都是一致的。
• 应用场景：
  • 退出登录时跳转到登录页。
  • 应用初始化时跳转到引导页或主页。

4. uni.switchTab(OBJECT)

• 特点：
  • 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
  • tabBar 页面的生命周期比较特殊，切换时不会销毁。
  • 只能跳转到配置在 pages.json 中的 tabBar 页面。
• 应用场景：
  • 底部导航栏的页面切换。

5. uni.navigateBack(OBJECT)

• 特点：
  • 关闭当前页面，返回上一页面或多级页面。
  • 通过 delta 参数指定返回的级数。
  • 不会创建新的页面实例，性能较好。
• 应用场景：
  • 在详情页点击返回按钮回到列表页。
  • 通过参数控制返回多级页面。

二、不同跳转方式的对比表

方法	是否关闭当前页面	是否可返回	是否支持 tabBar 页面	页面栈变化	生命周期影响
uni.navigateTo	否	是	否	增加一个页面实例	触发新页面的 onLoad
uni.redirectTo	是	否	否	替换当前页面实例	触发当前页面的 onUnload
uni.reLaunch	是	取决于目标	是	清空所有页面，只剩新页面	触发所有旧页面的 onUnload
uni.switchTab	是	否	是	关闭所有非 tabBar 页面	tabBar 页面不会销毁
uni.navigateBack	是	是	否	减少指定数量的页面实例	触发当前页面的 onUnload

三、特殊场景下的选择建议

1. 需要返回上一页：使用 navigateTo，配合 navigateBack 返回。
2. 禁止返回操作：使用 redirectTo 或 reLaunch，例如登录成功后。
3. tabBar 页面切换：必须使用 switchTab，其他方法无效。
4. 重置应用状态：使用 reLaunch，例如退出登录或切换账号。
5. 多级返回：使用 navigateBack 并设置 delta 参数。

四、注意事项

1. 页面栈限制：
   • navigateTo 的页面栈最多十层，超过后无法继续跳转。
   • 可以通过 getCurrentPages() 获取当前页面栈信息。
2. 生命周期差异：
   • switchTab 切换到的 tabBar 页面不会触发 onLoad，而是触发 onShow。
   • 缓存页面（使用 <keep-alive>）会触发 onShow 和 onReady，但不会触发 onLoad。
3. 参数传递：
   • 跳转时可以通过 URL 参数传递简单数据，如 url: '/pages/detail?id=123'。
   • 复杂数据可以通过全局变量、Vuex 或本地存储传递。

五、代码示例

// 1. 跳转到非 tabBar 页面（保留当前页）
uni.navigateTo({url: '/pages/detail/detail?id=123'
});// 2. 关闭当前页并跳转
uni.redirectTo({url: '/pages/result/result'
});// 3. 清空所有页面并跳转
uni.reLaunch({url: '/pages/index/index'
});// 4. 跳转到 tabBar 页面
uni.switchTab({url: '/pages/tabBar/home/home'
});// 5. 返回上一页
uni.navigateBack({delta: 1
});

掌握这些路由跳转方式的区别，能让你在开发 UniApp 应用时更加得心应手，根据不同的场景选择最合适的跳转方式。