引言
在移动应用开发中，页面跳转是一项基础而重要的功能。在uni-app中，我们可以使用Navigator组件来实现页面间的跳转。本文将详细介绍uni-app中Navigator组件的用法，包括基本用法、传参方式以及注意事项。

其传参的方式主要有两种：一种是Query参数传递，一种是组件间传值。接下来将在后面进行详细的介绍。

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
}

这种方式把参数放在url参数中，如果参数很多的话，url将会变得很长，这种情况下建议改为组件间传参。

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
 })
}

这种方式下，url就会很简短，没有冗长的url。

3.总结
简单了解uni-app中Navigator的基本用法

到此这篇关于uni-app中Navigator组件的用法详解及传参方式的文章就介绍到这了,更多相关uni-app Navigator组件用法内容请搜索掘金网以前的文章或继续浏览其他的相关文章希望大家以后多多支持掘金网！