NavRouter

導航組件，默認提供點擊響應處理，不需要開發者自定義點擊事件邏輯。

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

子組件

必須包含兩個子組件，其中第二個子組件必須為[NavDestination]。

說明：
子組件個數異常時：
有且僅有1個時，觸發路由到NavDestination的能力失效。
有且僅有1個時，且使用NavDestination場景下，不進行路由。
大于2個時，后續的子組件不顯示。
第二個子組件不為NavDestination時，觸發路由功能失效。

接口

NavRouter

NavRouter()

NavRouter10+

NavRouter(value: RouteInfo)

提供路由信息，指定點擊NavRouter時，要跳轉的NavDestination頁面。

參數：

參數名	參數類型	必填	參數描述
value	[RouteInfo]	否	路由信息

屬性

除支持[通用屬性]外，還支持以下屬性：

名稱	參數類型	描述
mode	[NavRouteMode]	指定點擊NavRouter跳轉到NavDestination頁面時，使用的路由模式。默認值：NavRouteMode.PUSH_WITH_RECREATE

RouteInfo10+對象說明

名稱	參數類型	必填	描述
name	string	是	點擊NavRouter跳轉到的NavDestination頁面的名稱。
param	unknown	否	點擊NavRouter跳轉到NavDestination頁面時，傳遞的參數。

NavRouteMode枚舉類型說明

名稱	描述
PUSH_WITH_RECREATE	跳轉到新的NavDestination頁面時，替換當前顯示的NavDestination頁面，頁面銷毀，但該頁面信息仍保留在路由棧中。
PUSH	跳轉到新的NavDestination頁面時，覆蓋當前顯示的NavDestination頁面，該頁面不銷毀，且頁面信息保留在路由棧中。
REPLACE	跳轉到新的NavDestination頁面時，替換當前顯示的NavDestination頁面，頁面銷毀，且該頁面信息從路由棧中清除。

事件

名稱	功能描述
onStateChange(callback: (isActivated: boolean) => void)	組件激活狀態切換時觸發該回調。返回值isActivated為true時表示激活，為false時表示未激活。說明：開發者點擊激活NavRouter，加載對應的NavDestination子組件時，回調onStateChange(true)。NavRouter對應的NavDestination子組件不再顯示時，回調onStateChange(false)。`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

搜狗高速瀏覽器截圖20240326151547.png

示例

// xxx.ets
@Entry
@Component
struct NavRouterExample {
  private arr: number[] = [0, 1, 2, 3]
  @State isActive: boolean = false
  @State dex: number = -1

  build() {
    Column() {
      Navigation() {
        List({ space: 12, initialIndex: 0 }) {
          ForEach(this.arr, (item: number, index: number = 0) = > {
            ListItem() {
              NavRouter() {
                Row() {
                  Image($r('app.media.icon')).width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 })
                  Text(`NavRouter${item + 1}`)
                    .fontSize(22)
                    .fontWeight(500)
                    .textAlign(TextAlign.Center)
                }
                .width(180)
                .height(72)
                .backgroundColor(this.dex === index ? '#ccc' : '#fff')
                .borderRadius(24)

                NavDestination() {
                  Text(`我是NavDestination第${item + 1}頁內容`).fontSize(50)
                  Flex({ direction: FlexDirection.Row }) {
                    Row() {
                      Image($r('app.media.icon')).width(40).height(40).borderRadius(40).margin({ right: 15 })
                      Text('今天共有七節課').fontSize(30)
                    }.padding({ left: 15 })
                  }
                }.backgroundColor('#ccc')
                .title(`NavDestination${item + 1}`)
              }.onStateChange((isActivated: boolean) = > {
                if(isActivated) {
                  this.dex = index;
                }
              })
            }
          }, (item:number) = > item.toString())
        }
        .height('100%')
        .margin({ top: 12, left: 12 })
      }
      .mode(NavigationMode.Split)
      .hideTitleBar(true)
      .hideToolBar(true)
    }.height('100%')
  }
}