openharmony容器组件之Navigator

Navigato：路由容器组件，提供路由跳转能力
Navigator(value?: {target: string, type?: NavigationType})
        target：指定跳转目标页面的路径。
        type：指定路由方式(默认：NavigationType.Push)
                    NavigationType
                        Push：跳转到应用内的指定页面
                        Replace：用应用内的某个页面替换当前页面，并销毁被替换的页面
                        Back：返回上一页面或指定的页面
属性：
active：当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作
params：跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得

效果：

 

代码：

NavigatorPage.ets

@Entry
@Component
struct NavigatorPage {
  @State active: boolean = false
  @State Text: string = '哈哈哈'

  build() {

    Column() {
      Navigator({ target: 'pages/NavigatorDetailPage', type: NavigationType.Push }) {
        Text('携带参数(params:' + this.Text + ')跳转下一页面').width('100%').textAlign(TextAlign.Center).margin({ top: 20, bottom: 20 })
      }
      //携带参数跳转
      .params({ text: this.Text })

      Navigator() {
        Text('back to previous page').width('100%').textAlign(TextAlign.Center)
      }.active(this.active).onClick(() => {
        this.active = true
      })
    }
    .width('100%')
    .height('100%')
  }
}

NavigatorDetailPage.ets

import router from '@system.router'

@Entry
@Component
struct NavigatorDetailPage {
  //获取上一个页面携带的数据
  @State content: string = router.getParams().text.toString()

  build() {

    Column() {
      Navigator({ target: 'pages/NavigatorBackPage', type: NavigationType.Push }) {
        Text('go to back').width('100%').height(30).textAlign(TextAlign.Center)
      }

      Text('接收参数：' + this.content).width('100%').textAlign(TextAlign.Center)
    }
    .width('100%')
    .height('100%')
  }
}

NavigatorBackPage.ets

@Entry
@Component
struct NavigatorBackPage {
  @State message: string = 'Hello World'

  build() {
    Column() {
      // type: NavigationType.Back返回指定页面
      Navigator({ target: 'pages/NavigatorPage', type: NavigationType.Back }) {
        Text('return to Navigator page').width('100%').textAlign(TextAlign.Center)
      }
    }
    .width('100%')
    .height('100%')
  }
}