什么？掌握 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. 页面跳转的常见问题与解决方案

1. 为什么 uni.navigateTo 不能跳转到 tabBar 页面？
   uni.navigateTo 不能跳转到 tabBar 页面。要跳转到 tabBar 页面，应该使用 uni.switchTab。

2. 如何在跳转时携带参数？
   在跳转时可以通过 URL 查询字符串来传递参数。例如：

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

   目标页面可以通过 this.$route 或 uni.getStorage 获取传递的参数。

3. 如何处理页面跳转的返回值？
   UniApp 的页面跳转 API（如 uni.navigateTo、uni.redirectTo 等）都返回一个 Promise 对象，可以通过 .then() 或 async/await 来处理返回值或跳转成功的回调。

总结

UniApp 的页面路由 API 提供了多种便捷的接口，帮助开发者实现页面跳转、返回、获取页面信息等功能。通过合理使用这些 API，可以高效地管理页面之间的跳转与状态，提升用户体验。在实际开发中，可以根据需求选择合适的 API，如跳转到新页面时使用 uni.navigateTo，跳转到 tabBar 页面时使用 uni.switchTab，返回上一页面时使用 uni.navigateBack 等。

希望本文能帮助你更好地掌握 UniApp 的页面路由 API，提升开发效率！