uni-app中Navigator组件的用法详解
时间:2024-03-28 10:50:56 来源:网络cs 作者:胡椒 栏目:卖家故事 阅读:
uni-app中Navigator组件的用法详解
文章目录
引言1.基本用法1.1 uni路由API说明1.2 五种种常见的跳转方式1.2.1 uni.navigateTo(OBJECT)1.2.2 uni.redirectTo(OBJECT)1.2.3 uni.reLaunch(OBJECT)1.2.4 uni.switchTab(OBJECT)1.2.5 uni.navigateBack(OBJECT) 1.3 Navigator组件的基本用法 2.传参方式2.1 Query参数传递2.2 组件间传值 3.总结
引言
在移动应用开发中,页面跳转是一项基础而重要的功能。在uni-app中,我们可以使用Navigator组件来实现页面间的跳转。本文将详细介绍uni-app中Navigator组件的用法,包括基本用法、传参方式以及注意事项。
1.基本用法
1.1 navigator API 介绍
navigator用于页面跳转。
该组件类似HTML中的a标签,但只能跳转本地页面。目标页面必须在pages.json中册。
该组件的功能有API方式,另见:https://uniapp.dcloud.io/api/router?id=navigateto
1.1 uni路由API说明
(图片来源于官方文档)
注意跳转tabbar页面,必须设置open-type=“switchTab”navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, 的子节点背景色应为透明色。navigator-open-type属性 如果使用对应的值,则对应值的功能会高于对应跳转路径。app-nvue 平台只有纯nvue项目(render为native)才支持 。非render为native的情况下,nvue暂不支持navigator组件,请使用API跳转。app下退出应用,Android平台可以使用plus.runtime.quit。iOS没有退出应用的概念。uLink组件是navigator组件的增强版,样式上自带下划线,功能上支持打开在线网页、其他App的schema、mailto发邮件、tel打电话。Vue3 项目因 SSR 需要,H5 端会在外层嵌套 a 标签。
1.2 五种种常见的跳转方式
1.2.1 uni.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
1.2.2 uni.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。
1.2.3 uni.reLaunch(OBJECT)
关闭所有页面,打开到应用内的某个页面。
1.2.4 uni.switchTab(OBJECT)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
1.2.5 uni.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。
1.3 Navigator组件的基本用法
在需要跳转的页面的.vue文件中,使用Navigator组件的标签:<navigator url="/pages/index/index"></navigator>
在上述代码中,我们使用url属性设置跳转目标页面的路径,例如上述代码中的跳转目标页面是/pages/index/index。
在源页面的.js文件中,使用以下代码来设置Navigator组件的跳转事件:onNavigatorTap() { uni.navigateTo({ url: '/pages/index/index' })}
在上述代码中,我们使用uni.navigateTo()方法实现跳转操作,其中url属性用于设置跳转目标页面的路径。
2.传参方式
在实际开发中,我们通常需要将一些参数传递给目标页面。Navigator组件提供了多种传参方式:
2.1 Query参数传递
在源页面中,使用以下代码设置Navigator组件的url属性<navigator url="/pages/index/index?name=hhs&age=18"></navigator>
在目标页面的.js文件中,可以使用以下代码获取Query参数: onLoad(options) { console.log(options.name) // 输出hhs console.log(options.age) // 输出18}
2.2 组件间传值
在源页面中,可以使用以下代码设置Navigator组件的事件:onNavigatorTap() { uni.navigateTo({ url: '/pages/index/index', success: function(res) { res.eventChannel.emit('customEvent', { name: 'Tom', age: 18 }) } })}
在目标页面的.js文件中,可以使用以下代码获取传递的参数: onLoad(options) { const eventChannel = this.getOpenerEventChannel() eventChannel.on('customEvent', (data) => { console.log(data.name) // 输出hhs console.log(data.age) // 输出18 })}
3.总结
阅读本书更多章节>>>>简单了解uni-app中Navigator的基本用法
本文链接:https://www.kjpai.cn/gushi/2024-03-28/149905.html,文章来源:网络cs,作者:胡椒,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!
下一篇:返回列表