Taro 中如何进行页面跳转？

推荐答案

在 Taro 中，页面跳转可以通过 Taro.navigateTo、Taro.redirectTo、Taro.switchTab 等方法来实现。以下是常用的页面跳转方式：

// www.javascriptcn.com code example
import Taro from '@tarojs/taro';

// 1. 跳转到非 tabBar 页面，保留当前页面
Taro.navigateTo({
  url: '/pages/detail/detail?id=123'
});

// 2. 关闭当前页面，跳转到非 tabBar 页面
Taro.redirectTo({
  url: '/pages/detail/detail?id=123'
});

// 3. 跳转到 tabBar 页面，关闭其他所有非 tabBar 页面
Taro.switchTab({
  url: '/pages/index/index'
});

// 4. 返回上一页面或多级页面
Taro.navigateBack({
  delta: 1 // 返回的页面层数
});

本题详细解读

1. Taro.navigateTo

Taro.navigateTo 用于跳转到非 tabBar 页面，并且会保留当前页面。这意味着用户可以通过返回按钮回到之前的页面。该方法适用于需要保留当前页面状态的场景。

• 参数：
  • url：需要跳转的页面路径，路径后可以带参数。
  • success、fail、complete：回调函数，分别用于处理成功、失败和完成的情况。

2. Taro.redirectTo

Taro.redirectTo 用于关闭当前页面，并跳转到非 tabBar 页面。与 navigateTo 不同，redirectTo 不会保留当前页面，适用于不需要返回的场景。

• 参数：
  • url：需要跳转的页面路径，路径后可以带参数。
  • success、fail、complete：回调函数，分别用于处理成功、失败和完成的情况。

3. Taro.switchTab

Taro.switchTab 用于跳转到 tabBar 页面，并且会关闭其他所有非 tabBar 页面。该方法适用于需要在 tabBar 页面之间切换的场景。

• 参数：
  • url：需要跳转的 tabBar 页面路径。
  • success、fail、complete：回调函数，分别用于处理成功、失败和完成的情况。

4. Taro.navigateBack

Taro.navigateBack 用于返回上一页面或多级页面。通过 delta 参数可以指定返回的页面层数。

• 参数：
  • delta：返回的页面层数，默认为 1。
  • success、fail、complete：回调函数，分别用于处理成功、失败和完成的情况。

注意事项

• 页面路径需要在 app.config.js 中预先定义。
• navigateTo 和 redirectTo 只能跳转到非 tabBar 页面，而 switchTab 只能跳转到 tabBar 页面。
• 页面跳转时，可以通过 URL 传递参数，目标页面可以通过 this.$router.params 获取参数。