uniapp如何实现跳转

在 UniApp 中,页面跳转主要可以通过两种方式实现:使用 <navigator> 组件和调用 UniApp 提供的导航 API。以下是这两种方式的详细说明:

1. 使用 <navigator> 组件

<navigator> 组件允许你在页面上创建一个可点击的元素,点击后会跳转到指定的页面。

复制代码

html复制代码

|---|--------------------------------------------------------------------------------------------|
| | <navigator url="/pages/targetPage/targetPage" open-type="navigate">点击跳转到目标页面</navigator> |

url 属性指定了要跳转的页面路径,open-type 属性定义了跳转的方式,比如 navigate 表示保留当前页面,跳转到应用内的某个页面。

2. 使用 UniApp 导航 API

UniApp 提供了一系列导航 API,用于在 JavaScript 代码中控制页面跳转。以下是一些常用的导航 API:

  • uni.navigateTo(OBJECT):保留当前页面,跳转到应用内的某个页面,使用 uni.navigateBack 可以返回到原页面。
复制代码

javascript复制代码

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

  • uni.redirectTo(OBJECT):关闭当前页面,跳转到应用内的某个页面。
复制代码

javascript复制代码

|---|----------------------------------------|
| | uni.redirectTo({ |
| | url: '/pages/targetPage/targetPage' |
| | }); |

  • uni.reLaunch(OBJECT):关闭所有页面,打开到应用内的某个页面。
复制代码

javascript复制代码

|---|----------------------------------------|
| | uni.reLaunch({ |
| | url: '/pages/targetPage/targetPage' |
| | }); |

  • uni.switchTab(OBJECT):跳转到 tabBar 页面,并关闭其他非 tabBar 页面。
复制代码

javascript复制代码

|---|----------------------------------------|
| | uni.switchTab({ |
| | url: '/pages/tabBarPage/tabBarPage' |
| | }); |

  • uni.navigateBack(OBJECT):关闭当前页面,返回上一页面或多级页面。
复制代码

javascript复制代码

|---|------------------------------------------------|
| | uni.navigateBack({ |
| | delta: 1 // 返回的页面数,如果 delta 大于现有页面数,则返回到首页。 |
| | }); |

在使用这些 API 时,请确保提供的 url 路径是正确的,并且目标页面已经在项目的 pages.json 文件中声明。

注意事项:

  • 路径可以是绝对路径,也可以是相对路径。绝对路径以 / 开头,表示从项目根目录开始的路径;相对路径则相对于当前页面的路径。
  • 路径后面可以附带查询参数,如 /pages/targetPage/targetPage?param1=value1&param2=value2,在目标页面中可以通过 this.$route.query 来获取这些参数。
  • 如果需要跳转到外部链接,可以使用 <a> 标签或者 uni.openUrl API。
  • 在使用 API 进行页面跳转时,建议进行错误处理,以处理可能出现的异常情况,比如路径错误或页面不存在等。
相关推荐
LT10157974441 小时前
2026年在线兼容性测试工具推荐|零部署网页 / APP / 小程序实测对比
测试工具·小程序
码农客栈4 小时前
小程序学习(二十八)之“订单列表”
小程序
天丁o9 小时前
Spring Boot + uni-app 智慧考勤闭环 Demo:打卡记录、异常状态和日统计如何复用到企业系统
spring boot·uni-app·mybatis plus·企业管理系统·考勤系统
这是个栗子9 小时前
uni-app 微信小程序开发:常用事件指令(@xxx)(一)
微信小程序·小程序·uni-app
2601_962344621 天前
计算机毕业设计之基于大数据的投保数据的分析系统的设计与实现
大数据·人工智能·深度学习·机器学习·信息可视化·小程序·课程设计
黑黑的独立开发笔记1 天前
「 简记往来」第十五篇:小程序性能优化——首屏从2.5秒到1.2秒
性能优化·小程序·首屏优化·分包加载·setdata·简记往来
小徐_23334 天前
Wot UI 2.2.0 发布:Button 新增 subtle,VideoPreview 预览体验继续增强
前端·微信小程序·uni-app
宸翰5 天前
解决 uni-app App 端 vue-i18n 占位符丢失:封装跨端可用的 tf 格式化方法
前端·vue.js·uni-app
时光足迹6 天前
uni-app 视频通话实战:康复师与患者视频问诊的 6 个致命 Bug 与解决方案
android·ios·uni-app
时光足迹6 天前
腾讯云 TRTC UniApp SDK 从入门到上线
前端·vue.js·uni-app