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 Column() { 81 Navigation() { 82 NavRouter() { 83 Row() { 84 Row().width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }).backgroundColor(Color.Pink) 85 Text(`WLAN`) 86 .fontSize(22) 87 .fontWeight(500) 88 .textAlign(TextAlign.Center) 89 } 90 .width('90%') 91 .height(72) 92 NavDestination() { 93 Flex({ direction: FlexDirection.Row }) { 94 Text('未找到可用WLAN').fontSize(30).padding({ left: 15 }) 95 } 96 }.hideTitleBar(false).backgroundColor('#0c182431') 97 }.backgroundColor(this.isActiveWLAN ? '#ccc' : '#fff') 98 .borderRadius(24) 99 .onStateChange((isActivated: boolean) => { 100 this.isActiveWLAN = isActivated 101 }) 102 103 NavRouter() { 104 Row() { 105 Row().width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }).backgroundColor(Color.Pink) 106 Text(`蓝牙`) 107 .fontSize(22) 108 .fontWeight(500) 109 .textAlign(TextAlign.Center) 110 } 111 .width('90%') 112 .height(72) 113 114 NavDestination() { 115 Flex({ direction: FlexDirection.Row }) { 116 Text('未找到可用蓝牙').fontSize(30).padding({ left: 15 }) 117 } 118 }.hideTitleBar(false).backgroundColor('#0c182431') 119 }.backgroundColor(this.isActiveBluetooth ? '#ccc' : '#fff') 120 .borderRadius(24) 121 .onStateChange((isActivated: boolean) => { 122 this.isActiveBluetooth = isActivated 123 }) 124 } 125 .title('设置') 126 .titleMode(NavigationTitleMode.Free) 127 .mode(NavigationMode.Auto) 128 .hideTitleBar(false) 129 .hideToolBar(true) 130 }.height('100%') 131 } 132} 133``` 134 135
