uni-app中路由跳转的几种方式和适用场景

在 UniApp 中，路由跳转是实现页面导航的核心功能。UniApp 提供了多种路由跳转方式，适用于不同的场景。以下是 UniApp 中常用的几种路由跳转方式：

1. uni.navigateTo

• 功能：跳转到非 tabBar 页面，保留当前页面，新页面会压入页面栈。

• 特点：

  • 可以返回上一页。
  • 适合用于普通页面的跳转。

• 示例：

  uni.navigateTo({
    url: '/pages/detail/detail?id=1' // 目标页面路径，支持传递参数
  });

2. uni.redirectTo

• 功能：关闭当前页面，跳转到非 tabBar 页面。

• 特点：

  • 无法返回上一页。
  • 适合用于无需返回的场景，如登录成功后跳转到首页。

• 示例：

  uni.redirectTo({
    url: '/pages/index/index'
  });

3. uni.reLaunch

• 功能：关闭所有页面，跳转到任意页面（包括 tabBar 页面）。

• 特点：

  • 清空页面栈，无法返回之前的页面。
  • 适合用于重置应用状态，如退出登录后跳转到登录页。

• 示例：

  uni.reLaunch({
    url: '/pages/login/login'
  });

4. uni.switchTab

• 功能：跳转到 tabBar 页面，关闭其他所有非 tabBar 页面。

• 特点：

  • 只能跳转到 tabBar 页面。
  • 适合用于切换底部导航栏页面。

• 示例：

  uni.switchTab({
    url: '/pages/home/home'
  });

5. uni.navigateBack

• 功能：返回上一页或多级页面。

• 特点：

  • 可以指定返回的层级数。
  • 适合用于返回操作。

• 示例：

  uni.navigateBack({
    delta: 1 // 返回的层级数，1 表示返回上一页
  });

6. uni.preloadPage

• 功能：预加载页面，提升页面跳转速度。

• 特点：

  • 提前加载目标页面的资源。
  • 适合用于需要快速跳转的场景。

• 示例：

  uni.preloadPage({
    url: '/pages/detail/detail?id=1'
  });

7. uni.chooseAddress 等特殊跳转

• 功能：跳转到特殊页面，如选择地址、选择发票等。

• 特点：

  • 调用系统或小程序的原生功能。
  • 适合用于特定场景。

• 示例：

  uni.chooseAddress({
    success(res) {
      console.log(res);
    }
  });

8. <navigator> 组件

• 功能：通过组件实现页面跳转。

• 特点：

  • 类似于 HTML 中的 <a> 标签。
  • 支持 navigateTo、redirectTo、switchTab 等跳转方式。

• 示例：

  <navigator url="/pages/detail/detail?id=1" open-type="navigateTo">
    跳转到详情页
  </navigator>

9. uni.$emit 和 uni.$on 跨页面通信

• 功能：通过事件机制实现页面间通信。

• 特点：

  • 适合用于页面间传递数据。
  • 无需直接跳转页面。

• 示例：

  // 页面 A 发送事件
  uni.$emit('updateData', { message: 'Hello' });
  
  // 页面 B 监听事件
  uni.$on('updateData', (data) => {
    console.log(data.message); // 输出：Hello
  });

总结

根据具体场景选择合适的跳转方式，可以更好地实现页面导航和用户体验优化。

版权声明：本文为原创文章，版权归 全栈开发技术博客 所有。

本文链接：https://www.lvtao.net/dev/uniapp-route-jump.html

转载时须注明出处及本声明