HarmonyOS鸿蒙学习笔记（9）Navigator组件实现页面路由跳转

在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官方资料
HarmonyOS鸿蒙学习笔记（2）路由ohos.router的使用