1# NavRouter 2 3导航组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。 4 5> **说明：** 6> 7> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 子组件 10 11必须包含两个子组件，其中第二个子组件必须为[NavDestination](ts-basic-components-navdestination.md)。 12 13> **说明：** 14> 15> 子组件个数异常时： 16> 1. 有且仅有1个时，触发路由到NavDestination的能力失效。 17> 2. 有且仅有1个时，且使用NavDestination场景下，不进行路由。 18> 3. 大于2个时，后续的子组件不显示。 19> 4. 第二个子组件不为NavDestination时，触发路由功能失效。 20 21## 接口 22 23### NavRouter 24 25NavRouter() 26 27### NavRouter<sup>10+</sup> 28 29NavRouter(value: RouteInfo) 30 31提供路由信息，指定点击NavRouter时，要跳转的NavDestination页面。 32 33 34**参数：** 35 36| 参数名 | 参数类型 | 必填 | 参数描述 | 37| ------- | ----------------------------------- | ---- | ------------- | 38| value | [RouteInfo](#routeinfo10对象说明) | 否 | 路由信息 | 39 40## 属性 41 42除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 43 44| 名称 | 参数类型 | 描述 | 45| ----------------------------- | ---------------------------------------- | ---------------------------------------- | 46| mode | [NavRouteMode](#navroutemode枚举类型说明) | 指定点击NavRouter跳转到NavDestination页面时，使用的路由模式。<br/>默认值：NavRouteMode.PUSH_WITH_RECREATE<br/> | 47 48## RouteInfo<sup>10+</sup>对象说明 49 50| 名称 | 参数类型 | 必填 | 描述 | 51| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 52| name | string | 是 | 点击NavRouter跳转到的NavDestination页面的名称。 | 53| param | unknown | 否 | 点击NavRouter跳转到NavDestination页面时，传递的参数。 | 54 55## NavRouteMode枚举类型说明 56 57| 名称 | 描述 | 58| ----- | ---------------- | 59| PUSH_WITH_RECREATE | 跳转到新的NavDestination页面时，替换当前显示的NavDestination页面，页面销毁，但该页面信息仍保留在路由栈中。 | 60| PUSH | 跳转到新的NavDestination页面时，覆盖当前显示的NavDestination页面，该页面不销毁，且页面信息保留在路由栈中。 | 61| REPLACE | 跳转到新的NavDestination页面时，替换当前显示的NavDestination页面，页面销毁，且该页面信息从路由栈中清除。 | 62 63## 事件 64 65| 名称 | 功能描述 | 66| ------------------------------------------------------- | ------------------------------------------------------------ | 67| onStateChange(callback: (isActivated: boolean) => void) | 组件激活状态切换时触发该回调。返回值isActivated为true时表示激活，为false时表示未激活。<br/> **说明：** <br/>开发者点击激活NavRouter，加载对应的NavDestination子组件时，回调onStateChange(true)。NavRouter对应的NavDestination子组件不再显示时，回调onStateChange(false)。 | 68 69## 示例 70 71```ts 72// xxx.ets 73@Entry 74@Component 75struct NavRouterExample { 76 private arr: number[] = [0, 1, 2, 3] 77 @State isActive: boolean = false 78 @State dex: number = -1 79 80 build() { 81 Column() { 82 Navigation() { 83 List({ space: 12, initialIndex: 0 }) { 84 ForEach(this.arr, (item: number, index: number = 0) => { 85 ListItem() { 86 NavRouter() { 87 Row() { 88 Image($r('app.media.icon')).width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }) 89 Text(`NavRouter${item + 1}`) 90 .fontSize(22) 91 .fontWeight(500) 92 .textAlign(TextAlign.Center) 93 } 94 .width(180) 95 .height(72) 96 .backgroundColor(this.dex === index ? '#ccc' : '#fff') 97 .borderRadius(24) 98 99 NavDestination() { 100 Text(`我是NavDestination第${item + 1}页内容`).fontSize(50) 101 Flex({ direction: FlexDirection.Row }) { 102 Row() { 103 Image($r('app.media.icon')).width(40).height(40).borderRadius(40).margin({ right: 15 }) 104 Text('今天共有七节课').fontSize(30) 105 }.padding({ left: 15 }) 106 } 107 }.backgroundColor('#ccc') 108 .title(`NavDestination${item + 1}`) 109 }.onStateChange((isActivated: boolean) => { 110 if(isActivated) { 111 this.dex = index; 112 } 113 }) 114 } 115 }, (item:number) => item.toString()) 116 } 117 .height('100%') 118 .margin({ top: 12, left: 12 }) 119 } 120 .mode(NavigationMode.Split) 121 .hideTitleBar(true) 122 .hideToolBar(true) 123 }.height('100%') 124 } 125} 126``` 127 128