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 进行页面跳转时,建议进行错误处理,以处理可能出现的异常情况,比如路径错误或页面不存在等。
相关推荐
2501_915918415 小时前
深入对比iOS开发中常用性能监控工具的底层原理与优缺点分析
android·ios·小程序·https·uni-app·iphone·webview
黄华SJ520it11 小时前
连锁多门店超市小程序:单品牌多家门店,总部统一管理、门店独立接单、线上到店/配送商超系统设计与实现
小程序·系统开发
AI多Agent协作实战派11 小时前
AI多Agent协作系统实战(二十三):Agent读HEARTBEAT.md不读AGENTS.md——openclaw的文件加载之谜
前端·数据库·人工智能·uni-app
m0_5474866615 小时前
《Vue.js + uni-app全栈开发从入门到实践 》全套PPT课件2026版
vue.js·uni-app
mykj155119 小时前
消费积分抵扣物业费小程序商城开发
小程序·积分商城抵扣物业费·积分商城小程序开发
三声三视1 天前
uni-app 鸿蒙端传参变成 [object Object]?顺着源码追到 ArkTS router 底层才搞明白
人工智能·ai·uni-app·aigc·ai编程·harmonyos
云迈科技-软件定制开发2 天前
2026年湖南长沙软件定制开发公司怎么选?本地企业做APP、小程序、管理系统的合作参考
小程序
小徐_23332 天前
Open Wot 1.0.5 发布:让 AI 接入 wot-ui,只需要两条命令
前端·uni-app·ai编程
AI多Agent协作实战派2 天前
AI多Agent协作系统实战(二十二):从6列到12列——任务监控报告的进化之路
java·人工智能·uni-app·bug
小杨小杨、努力变强!2 天前
VS Code运行HBuilder X中的uni-app项目
vscode·uni-app·uni-app run