uni-app,uni.navigateTo

一、uni.navigateTo 方法介绍

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

基本用法
javascript 复制代码
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.navigateTouni.navigateTo(功能完全一致)
  • wx.redirectTouni.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-domuseHistory<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。

相关推荐
随笔记7 分钟前
uniapp开发的app原生操作手机系统文件
前端·javascript·uni-app
于慨41 分钟前
uniapp上传文件
前端·uni-app
猫头_3 小时前
uni-app 转微信小程序 · 避坑与实战全记录
前端·微信小程序·uni-app
iOS阿玮7 小时前
凭一己之力干穿一个品牌,互联网+时代口碑比以前更重要了!
uni-app·app·apple
前端amanda9 小时前
uniapp中uview组件中u-input格式化后赋值踩坑
前端·javascript·uni-app
shadouqi21 小时前
问题1:uniapp在pages样式穿刺没有问题,在components组件中样式穿刺小程序不起效果
小程序·uni-app
草字21 小时前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
烂笔头儿@21 小时前
uniapp使用谷歌地图获取位置
uni-app
韩召华21 小时前
uniapp实现微信小程序导航功能
微信小程序·uni-app·notepad++