uni-app，uni.navigateTo

一、uni.navigateTo 方法介绍

uni.navigateTo 是 uni-app 框架中用于页面跳转的核心 API，主要功能是从当前页面打开新的非 tabBar 页面，同时保留当前页面（放入页面栈），支持返回操作。

基本用法

uni.navigateTo({url: '/pages/user/formproduct', // 目标页面路径（相对路径，从项目根目录开始）success: () => {console.log('跳转成功');},fail: (err) => {console.error('跳转失败', err);}
});

核心特点

1. 页面栈管理：跳转后当前页面会被保留在页面栈中，目标页面入栈，可通过 uni.navigateBack() 返回上一页。
2. 路径规则：url 需以 / 开头，指向 pages.json 中注册的页面路径（如 /pages/user/formproduct 对应 pages/user/formproduct.vue）。
3. 参数传递：支持在 URL 后拼接参数（如 /pages/user/formproduct?id=1&name=test），目标页面通过 onLoad(option) 接收。
4. 限制：不能跳转到 tabBar 页面（需用 uni.switchTab），且页面栈深度有限制（默认最多 10 层）。

二、uni-app 同类型页面跳转 API 比较

uni-app 提供了多种页面跳转方法，适用于不同场景，具体区别如下：

API 方法	功能描述	适用场景	页面栈变化
uni.navigateTo	打开新页面，保留当前页面	普通页面跳转（如列表页 → 详情页）	新页面入栈（栈长度 +1）
uni.redirectTo	关闭当前页面，打开新页面	不需要返回上一页的跳转（如登录 → 首页）	当前页面出栈，新页面入栈
uni.reLaunch	关闭所有页面，打开新页面	重启应用（如退出登录后重新打开首页）	清空栈，新页面入栈
uni.switchTab	跳转到 tabBar 页面，关闭其他非 tabBar 页面	底部导航栏切换（如首页 ↔ 我的）	仅保留目标 tabBar 页面
uni.navigateBack	关闭当前页面，返回上一页面或多级页面（需指定 delta 参数，默认返回1级）	从详情页返回列表页	页面栈长度 -delta

三、与其他框架类似 API 的对比

1. 与微信小程序对比

微信小程序的页面跳转 API 与 uni-app 高度相似（因 uni-app 兼容小程序语法）：

• wx.navigateTo ≈ uni.navigateTo（功能完全一致）
• wx.redirectTo ≈ uni.redirectTo
• 差异：uni-app 对 API 进行了跨平台封装，同一套代码可在 H5、App 等平台运行，而微信小程序 API 仅适用于小程序环境。

2. 与 Vue Router 对比（Web 端）

Vue 中通过 vue-router 实现路由跳转，核心差异：

• 语法不同：Vue Router 用 this.$router.push('/path')，uni-app 用 uni.navigateTo({url: '/path'})。
• 配置方式：Vue Router 需要在 router.js 中定义路由表，uni-app 则在 pages.json 中配置页面路径。
• 跨平台性：uni-app 的跳转 API 适配多端，而 Vue Router 仅适用于 Web 端。

3. 与 React Router 对比

React 中通过 react-router-dom 的 useHistory 或 <Link> 组件跳转：

• 编程式跳转：React 用 history.push('/path')，uni-app 用 uni.navigateTo。
• 声明式跳转：React 用 <Link to="/path">，uni-app 需在模板中通过 @click 触发 uni.navigateTo。
• 核心区别：uni-app 是多端框架，跳转逻辑需兼容原生 App、小程序等环境，而 React Router 专注于 Web 端路由。

总结

uni.navigateTo 是 uni-app 中用于保留当前页面并打开新页面的核心跳转方法，适合大多数需要返回上一页的场景。与同框架其他 API 相比，其核心优势是保留页面栈；与其他框架相比，其特点是跨平台兼容性，一套代码可在多端实现一致的跳转逻辑。实际开发中需根据是否需要返回、是否跳转 tabBar 页面等场景，选择合适的跳转 API。