在HarmonyOS鸿蒙学习笔记（2）路由ohos.router的使用一文中讲解了鸿蒙路由的使用方法，在这里分享另外一个具有路由跳转功能的组件Navigator。 该组件可以将UI组件包裹起来，点击被包裹的UI组件可以实现页面跳转的效果。 在本博文中将实现点击Text组件，实现从页面NavigatorPageA 跳转到NavigatorPageB页面的效果，同时将参数传给NavigatorPageB.
@Entry@Componentexport struct NavigatorPageA { build() { Column() { //点击跳转到NavigatorPageB页面 Navigator({ target: ‘pages/NavigatorPageB‘ }) { Text(“点击我跳转“).fontSize(30).fontColor(Color.Blue) } .params({ text: “Hello“ })//传递参数Hello }.width(‘100%‘) .height(‘100%‘) .alignItems(HorizontalAlign.Center)//让图片水平居中 .justifyContent(FlexAlign.Center)//让图片垂直居中 }}通过上面的代码可以看出： 1、通过配置Navigator的target属性来指定跳转的目的页面。 2、通过Navigator的params方法来向目的页面传递参数。 NavigatorPageA实现效果如如下： 
再来看看NavigatorPageB的具体实现：
import router from ‘@system.router‘@Entry@Componentexport struct NavigatorPageB { build() { Column() { //点击的时候回返回NavigatorPageA Navigator({ target: ‘pages/NavigatorPage‘ ,type:NavigationType.Back}) { Text(router.getParams()[‘text‘].toString()).fontSize(30).fontColor(Color.Red) //也可以通过router.getParams().text.toString()拿具体的值 //Text(router.getParams().text.toString()).fontSize(30).fontColor(Color.Red) } }.width(‘50%‘) .height(‘100%‘) .alignItems(HorizontalAlign.Center)//让图片水平居中 .justifyContent(FlexAlign.Center)//让图片垂直居中 }}具体实现效果如下： 
NavigatorPageB做了如下两个操作： 1、通过router.getParams()[‘text‘].toString()或者router.getParams().text.toString()获取NavigatorPageA传来的参数 2、点击Text的时候返回NavigatorPageA，相当于点击了返回键。是因为NavigatorPageB页面中的Navigator配置了type:NavigationType.Back
另外Navigator也支持传递对象，比如定义一个商品类：
let NextId = 0;export class GoodsData { id: string; title: string; content: string; price: number; imgSrc: Resource; constructor(title: string, content: string, price: number, imgSrc: Resource) { this.id = `${NextId++}`; this.title = title; this.content = content; this.price = price; this.imgSrc = imgSrc; }}比如商品里列表页点击进入商品详情页：
@Componentstruct GoodsListItem { //商品信息类 private goodsItem: GoodsData build() { //点击跳转行情 Navigator({ target: ‘pages/ShoppingDetail‘ }) { //省略布局文件 } .params({ goodsData: this.goodsItem }) .margin({ right: 5}) }}那么商品详情页就可以这么写：
@Entry@Componentstruct ShoppingDetail { //获取商品数据，使用as语法将数据转换成GoodsData对象 private goodsItem: GoodsData = router.getParams()[‘goodsData‘] as GoodsData; build() { Column() { //显示名称 Text(this.goodsItem.title).fontColor(Color.Green).fontSize(30) } }}参考资料： Navigator官方资料 HarmonyOS鸿蒙学习笔记（2）路由ohos.router的使用
免责声明：本网站内容主要来自原创、合作伙伴供稿和第三方自媒体作者投稿，凡在本网站出现的信息，均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性，但不保证有关资料的准确性及可靠性，读者在使用前请进一步核实，并对任何自主决定的行为负责。本网站对有关资料所引致的错误、不确或遗漏，概不负任何法律责任。任何单位或个人认为本网站中的网页或链接内容可能涉嫌侵犯其知识产权或存在不实内容时，应及时向本网站提出书面权利通知或不实情况说明，并提供身份证明、权属证明及详细侵权或不实情况证明。本网站在收到上述法律文件后，将会依法尽快联系相关文章源头核实，沟通删除相关内容或断开相关链接。