如何使用 uni.navigateTo 进行页面跳转？

推荐答案

uni.navigateTo({
  url: '/pages/targetPage/targetPage'
});

本题详细解读

1. uni.navigateTo 的基本用法

uni.navigateTo 是 uni-app 中用于页面跳转的 API。它允许你跳转到应用内的某个页面，并且会保留当前页面在页面栈中，用户可以通过返回按钮回到之前的页面。

2. 参数说明

• url：要跳转的目标页面的路径。路径必须以 / 开头，并且是相对于 pages.json 中配置的页面路径。

3. 示例代码

uni.navigateTo({
  url: '/pages/targetPage/targetPage'
});

在这个示例中，/pages/targetPage/targetPage 是目标页面的路径。假设你在 pages.json 中配置了如下页面：

// www.javascriptcn.com code example
{
  "pages": [
    {
      "path": "pages/targetPage/targetPage",
      "style": {
        "navigationBarTitleText": "目标页面"
      }
    }
  ]
}

4. 注意事项

• uni.navigateTo 只能跳转到非 tabBar 页面。如果需要跳转到 tabBar 页面，应使用 uni.switchTab。
• 跳转的页面路径必须在 pages.json 中预先配置。
• 如果目标页面需要传递参数，可以在 url 后面添加查询字符串，例如：

uni.navigateTo({
  url: '/pages/targetPage/targetPage?param1=value1&param2=value2'
});

在目标页面中，可以通过 onLoad 生命周期函数获取这些参数：

onLoad(options) {
  console.log(options.param1); // 输出 value1
  console.log(options.param2); // 输出 value2
}

5. 相关 API

• uni.redirectTo：关闭当前页面，跳转到应用内的某个页面。
• uni.reLaunch：关闭所有页面，打开到应用内的某个页面。
• uni.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。