什么？掌握 UniApp 页面路由竟如此简单！
引言
UniApp 是一个跨平台的开发框架，提供了很多实用的 API 来帮助开发者处理跨平台的需求，尤其是页面路由相关的功能。页面路由 API 使得页面跳转、返回等操作变得更加简单且高效，特别适用于在小程序、H5、App 等平台之间进行页面管理。本文将详细介绍 UniApp 提供的页面路由相关 API，帮助你在项目中更好地实现页面跳转、返回等功能。
1. 页面路由 API 概述
UniApp 页面路由 API 允许开发者在不同页面之间进行跳转、返回、传递参数等操作。这些 API 提供了高度统一的接口，使得跨平台开发变得更加容易。常用的页面路由 API 包括：
- 页面跳转
- 页面返回
- 获取页面信息
- 关闭页面
接下来，我们将深入介绍每一个 API 的使用方法。
2. 页面跳转相关 API
2.1 uni.navigateTo
uni.navigateTo 用于打开一个新页面，但不关闭当前页面。适用于需要在当前页面之上打开新页面的场景。
- 功能：打开新页面
- 返回：
uni.navigateTo会返回一个navigationBar的对象，用于控制当前页面的导航栏。
uni.navigateTo({
url: '/pages/detail/detail?id=123' // 目标页面路径，可以带参数
});
说明：
url：目标页面的路径，支持传递查询参数。url中的路径可以是相对路径（如'/pages/detail/detail'）或者绝对路径。
2.2 uni.redirectTo
uni.redirectTo 用于关闭当前页面并跳转到目标页面。适用于用户登录、注册等操作完成后跳转到新页面的场景。
- 功能：关闭当前页面并跳转
- 返回：
uni.redirectTo不会返回页面对象，因为它会直接跳转到目标页面并关闭当前页面。
uni.redirectTo({
url: '/pages/login/login' // 目标页面路径
});
说明：
url：目标页面的路径，跳转后不会返回当前页面。
2.3 uni.switchTab
uni.switchTab 用于跳转到 tabBar 页面。这个 API 仅适用于在 tabBar 页面之间跳转。
- 功能：跳转到 tabBar 页面
- 返回：
uni.switchTab会跳转到指定的 tabBar 页面。
uni.switchTab({
url: '/pages/home/home' // 跳转到指定 tabBar 页面
});
说明：
url：目标 tabBar 页面路径，必须是配置文件中的tabBar页面。
2.4 uni.reLaunch
uni.reLaunch 用于关闭所有页面并跳转到目标页面。适用于应用启动后的重定向，比如用户登录后跳转到首页。
- 功能：关闭所有页面并跳转
- 返回：
uni.reLaunch不会返回页面对象，因为它会关闭所有页面并跳转到目标页面。
uni.reLaunch({
url: '/pages/dashboard/dashboard' // 目标页面路径
});
说明：
url：目标页面的路径，跳转后不会返回到其他页面。
3. 页面返回相关 API
3.1 uni.navigateBack
uni.navigateBack 用于返回到上一页，可以指定返回的页面层数。
- 功能：返回上一页面
- 参数：
delta：返回的页面层数，默认返回上一页。可以设置为大于 1 的值，返回到更早的页面。
uni.navigateBack({
delta: 1 // 返回上一页，默认值为1
});
说明：
delta：表示要返回的页面层数。默认为 1，表示返回上一页面。如果你想返回多个页面层级，可以设置更大的值。
3.2 uni.navigateBack（小程序）
在小程序中，uni.navigateBack 可以通过指定 delta 来返回多个页面。例如，delta: 3 会返回到三层之前的页面。
uni.navigateBack({
delta: 3 // 返回到倒数第三个页面
});
4. 获取页面信息相关 API
4.1 uni.getCurrentPages
uni.getCurrentPages 用于获取当前页面栈，可以用来获取当前页面和历史页面的信息。
- 功能：获取当前页面栈
- 返回：返回一个数组，包含当前栈中所有页面的信息。
const pages = uni.getCurrentPages(); // 获取当前页面栈
console.log(pages); // 输出当前页面栈信息
说明：
- 返回的数组是当前页面栈的页面对象，每个页面对象包含
route和options等属性。 - 通过此 API 可以实现页面跳转时记录页面路径和参数。
5. 页面关闭相关 API
5.1 uni.closePage
uni.closePage 用于关闭当前页面。适用于一些需要强制关闭当前页面的场景，例如用户退出时关闭所有页面。
uni.closePage({
success: function () {
console.log('页面关闭成功');
}
});
说明：
- 该 API 适用于通过页面栈管理应用的场景。
6. 页面跳转的常见问题与解决方案
-
为什么
uni.navigateTo不能跳转到 tabBar 页面？
uni.navigateTo不能跳转到 tabBar 页面。要跳转到 tabBar 页面，应该使用uni.switchTab。 -
如何在跳转时携带参数？
在跳转时可以通过 URL 查询字符串来传递参数。例如：uni.navigateTo({ url: '/pages/detail/detail?id=123&name=John' });目标页面可以通过
this.$route或uni.getStorage获取传递的参数。 -
如何处理页面跳转的返回值？
UniApp 的页面跳转 API（如uni.navigateTo、uni.redirectTo等）都返回一个Promise对象，可以通过.then()或async/await来处理返回值或跳转成功的回调。
总结
UniApp 的页面路由 API 提供了多种便捷的接口，帮助开发者实现页面跳转、返回、获取页面信息等功能。通过合理使用这些 API，可以高效地管理页面之间的跳转与状态，提升用户体验。在实际开发中，可以根据需求选择合适的 API，如跳转到新页面时使用 uni.navigateTo，跳转到 tabBar 页面时使用 uni.switchTab，返回上一页面时使用 uni.navigateBack 等。
希望本文能帮助你更好地掌握 UniApp 的页面路由 API，提升开发效率！
