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 进行页面跳转时,建议进行错误处理,以处理可能出现的异常情况,比如路径错误或页面不存在等。
相关推荐
不爱说话郭德纲1 天前
告别漫长的HbuilderX云打包排队!uni-app x 安卓本地打包保姆级教程(附白屏、包体积过大排坑指南)
android·前端·uni-app
HashTang2 天前
【AI 编程实战】第 12 篇:从 0 到 1 的回顾 - 项目总结与 AI 协作心得
前端·uni-app·ai编程
JunjunZ2 天前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app
郑州光合科技余经理3 天前
代码展示:PHP搭建海外版外卖系统源码解析
java·开发语言·前端·后端·系统架构·uni-app·php
TT_Close3 天前
“啪啪啪”三下键盘,极速拉起你的 uni-app 项目!
vue.js·uni-app·前端工程化
特立独行的猫a3 天前
uni-app x跨平台开发实战:开发鸿蒙HarmonyOS影视票房榜组件完整实现过程
华为·uni-app·harmonyos·轮播图·uniapp-x
吴声子夜歌3 天前
小程序——布局示例
小程序
luffy54593 天前
微信小程序页面使用类似filter函数的wxs语法
微信小程序·小程序
Slow菜鸟3 天前
微信小程序开发(二)目录结构完全指南
微信小程序·小程序
00后整顿职场3 天前
Hbuilderx APP真机无法识别iqoo Z9+手机设备解决方案
uni-app·uniapp真机调试·真机运行