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 @State isActiveWLAN: boolean = false 77 @State isActiveBluetooth: boolean = false 78 79 build() { 80 Navigation() { 81 NavRouter() { 82 Row() { 83 Row() 84 .width(30) 85 .height(30) 86 .borderRadius(30) 87 .margin({ left: 3, right: 10 }) 88 .backgroundColor(Color.Pink) 89 Text(`WLAN`) 90 .fontSize(22) 91 .fontWeight(500) 92 .textAlign(TextAlign.Center) 93 } 94 .width('90%') 95 .height(60) 96 97 NavDestination() { 98 Flex({ direction: FlexDirection.Row }) { 99 Text('未找到可用WLAN').fontSize(30).padding({ left: 15 }) 100 } 101 }.title("WLAN") 102 } 103 .margin({ top: 10, bottom: 10 }) 104 .backgroundColor(this.isActiveWLAN ? '#ccc' : '#fff') 105 .borderRadius(20) 106 .mode(NavRouteMode.PUSH_WITH_RECREATE) 107 .onStateChange((isActivated: boolean) => { 108 this.isActiveWLAN = isActivated 109 }) 110 111 NavRouter() { 112 Row() { 113 Row() 114 .width(30) 115 .height(30) 116 .borderRadius(30) 117 .margin({ left: 3, right: 10 }) 118 .backgroundColor(Color.Pink) 119 Text(`蓝牙`) 120 .fontSize(22) 121 .fontWeight(500) 122 .textAlign(TextAlign.Center) 123 } 124 .width('90%') 125 .height(60) 126 127 NavDestination() { 128 Flex({ direction: FlexDirection.Row }) { 129 Text('未找到可用蓝牙').fontSize(30).padding({ left: 15 }) 130 } 131 }.title("蓝牙") 132 } 133 .margin({ top: 10, bottom: 10 }) 134 .backgroundColor(this.isActiveBluetooth ? '#ccc' : '#fff') 135 .borderRadius(20) 136 .mode(NavRouteMode.REPLACE) 137 .onStateChange((isActivated: boolean) => { 138 this.isActiveBluetooth = isActivated 139 }) 140 } 141 .height('100%') 142 .width('100%') 143 .title('设置') 144 .backgroundColor("#F2F3F5") 145 .titleMode(NavigationTitleMode.Free) 146 .mode(NavigationMode.Auto) 147 } 148} 149``` 150 151
