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

在HarmonyOS鸿蒙学习笔记（2）路由ohos.router的使用一文中讲解了鸿蒙路由的使用方法，在这里分享另外一个具有路由跳转功能的组件Navigator。 该组件可以将UI组件包裹起来，点击被包裹的UI组件可以实现页面跳转的效果。 在本博文中将实现点击Text组件，实现从页面NavigatorPageA 跳转到NavigatorPageB页面的效果，同时将参数传给NavigatorPageB.

@Entry
@Component
export 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
@Component
export 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;
  }
}

比如商品里列表页点击进入商品详情页：

@Component
struct GoodsListItem {
  //商品信息类
  private goodsItem: GoodsData

  build() {
  //点击跳转行情
    Navigator({ target: 'pages/ShoppingDetail' }) {
        //省略布局文件
    }
    .params({ goodsData: this.goodsItem })
    .margin({ right: 5})
  }
}

那么商品详情页就可以这么写：

@Entry
@Component
struct 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的使用