鴻蒙ArkTS容器組件：Navigator

Navigator

路由容器組件，提供路由跳轉(zhuǎn)能力。

說明：
開發(fā)前請熟悉鴻蒙開發(fā)指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標單獨標記該內(nèi)容的起始版本。

子組件

可以包含子組件。

接口

Navigator(value?: {target: string, type?: NavigationType})

參數(shù)：

參數(shù)名	參數(shù)類型	必填	參數(shù)描述
target	string	是	指定跳轉(zhuǎn)目標頁面的路徑。
type	[NavigationType]	否	指定路由方式。默認值：NavigationType.Push

NavigationType枚舉說明

名稱	描述
Push	跳轉(zhuǎn)到應用內(nèi)的指定頁面。
Replace	用應用內(nèi)的某個頁面替換當前頁面，并銷毀被替換的頁面。
Back	返回到指定的頁面。指定的頁面不存在棧中時不響應。未傳入指定的頁面時返回上一頁。

屬性

名稱	參數(shù)	描述
active	boolean	當前路由組件是否處于激活狀態(tài)，處于激活狀態(tài)時，會生效相應的路由操作。
params	object	跳轉(zhuǎn)時要同時傳遞到目標頁面的數(shù)據(jù)，可在目標頁面使用[router.getParams()]獲得。
target	string	設置跳轉(zhuǎn)目標頁面的路徑。目標頁面需加入main_pages.json文件中。
type	[NavigationType]	設置路由方式。默認值：NavigationType.Push`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

示例

// Navigator.ets
@Entry
@Component
struct NavigatorExample {
  @State active: boolean = false
  @State name: NameObject = { name: 'news' }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
      Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) {
        Text('Go to ' + this.name.name + ' page')
          .width('100%').textAlign(TextAlign.Center)
      }.params(new TextObject(this.name)) // 傳參數(shù)到Detail頁面

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

interface NameObject {
  name: string;
}

class TextObject {
  text: NameObject;

  constructor(text: NameObject) {
    this.text = text;
  }
}

// Detail.ets
import router from '@ohos.router'

@Entry
@Component
struct DetailExample {
  // 接收Navigator.ets的傳參
  params: Record< string, NameObject > = router.getParams() as Record< string, NameObject >
  @State name: NameObject = this.params.text

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
      Navigator({ target: 'pages/container/navigator/Back', type: NavigationType.Push }) {
        Text('Go to back page').width('100%').height(20)
      }

      Text('This is ' + this.name.name + ' page')
        .width('100%').textAlign(TextAlign.Center)
    }
    .width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
  }
}

interface NameObject {
  name: string;
}

// Back.ets
@Entry
@Component
struct BackExample {
  build() {
    Column() {
      Navigator({ target: 'pages/container/navigator/Navigator', type: NavigationType.Back }) {
        Text('Return to Navigator Page').width('100%').textAlign(TextAlign.Center)
      }
    }.width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
  }
}