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);}
});
核心特点
- 页面栈管理：跳转后当前页面会被保留在页面栈中，目标页面入栈，可通过
uni.navigateBack()返回上一页。 - 路径规则：
url需以/开头，指向pages.json中注册的页面路径（如/pages/user/formproduct对应pages/user/formproduct.vue）。 - 参数传递：支持在 URL 后拼接参数（如
/pages/user/formproduct?id=1&name=test），目标页面通过onLoad(option)接收。 - 限制：不能跳转到 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。