1# NavRouter 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @mayaolll--> 5<!--Designer: @jiangdayuan--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9导航组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。 10 11> **说明：** 12> 13> 从API version 13 开始，该组件不再维护，推荐使用[NavPathStack](ts-basic-components-navigation.md#navpathstack10)配合navDestination属性进行页面路由。 14> 15> 该组件从API version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 16 17## 子组件 18 19必须包含两个子组件，其中第二个子组件必须为[NavDestination](ts-basic-components-navdestination.md)。 20 21> **说明：** 22> 23> 子组件个数异常时： 24> 1. 有且仅有1个时，触发路由到NavDestination的能力失效。 25> 2. 有且仅有1个时，且使用NavDestination场景下，不进行路由。 26> 3. 大于2个时，后续的子组件不显示。 27> 4. 第二个子组件不为NavDestination时，触发路由功能失效。 28 29## 接口 30 31### NavRouter 32 33NavRouter() 34 35**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39### NavRouter<sup>10+</sup> 40 41NavRouter(value: RouteInfo) 42 43提供路由信息，指定点击NavRouter时，要跳转的NavDestination页面。 44 45**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 46 47**系统能力：** SystemCapability.ArkUI.ArkUI.Full 48 49**参数：** 50 51| 参数名 | 类型 | 必填 | 说明 | 52| ------- | ----------------------------------- | ---- | ------------- | 53| value | [RouteInfo](#routeinfo10对象说明) | 是 | 路由信息。 | 54 55## 属性 56 57除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 58 59### mode<sup>10+</sup> 60 61mode(mode: NavRouteMode) 62 63设置指定点击NavRouter跳转到NavDestination页面时，使用的路由模式。 64 65**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 66 67**系统能力：** SystemCapability.ArkUI.ArkUI.Full 68 69**参数：** 70 71| 参数名 | 类型 | 必填 | 说明 | 72| ----------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | 73| mode | [NavRouteMode](#navroutemode10枚举说明) | 是 | 指定点击NavRouter跳转到NavDestination页面时，使用的路由模式。<br/>默认值：NavRouteMode.PUSH_WITH_RECREATE | 74 75## RouteInfo<sup>10+</sup>对象说明 76 77**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 78 79**系统能力：** SystemCapability.ArkUI.ArkUI.Full 80 81| 名称 | 类型 | 必填 | 说明 | 82| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 83| name | string | 是 | 点击NavRouter跳转到的NavDestination页面的名称。 | 84| param | unknown | 否 | 点击NavRouter跳转到NavDestination页面时，传递的参数。 | 85 86## NavRouteMode<sup>10+</sup>枚举说明 87 88**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 89 90**系统能力：** SystemCapability.ArkUI.ArkUI.Full 91 92| 名称 | 说明 | 93| ----- | ---------------- | 94| PUSH_WITH_RECREATE | 跳转到新的NavDestination页面时，替换当前显示的NavDestination页面，页面销毁，但该页面信息仍保留在路由栈中。 | 95| PUSH | 跳转到新的NavDestination页面时，覆盖当前显示的NavDestination页面，该页面不销毁，且页面信息保留在路由栈中。 | 96| REPLACE | 跳转到新的NavDestination页面时，替换当前显示的NavDestination页面，页面销毁，且该页面信息从路由栈中清除。 | 97 98## 事件 99 100### onStateChange 101 102onStateChange(callback: (isActivated: boolean) => void) 103 104组件激活状态切换时触发该回调。开发者点击激活NavRouter，加载对应的NavDestination子组件时，回调onStateChange(true)。NavRouter对应的NavDestination子组件不再显示时，回调onStateChange(false)。 105 106**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 107 108**系统能力：** SystemCapability.ArkUI.ArkUI.Full 109 110**参数：** 111 112| 参数名 | 类型 | 必填 | 说明 | 113| ----------- | ------- | ---- | --------------------------------------- | 114| isActivated | boolean | 是 | isActivated为true时表示激活，为false时表示未激活。 | 115 116## 示例 117 118```ts 119// xxx.ets 120@Entry 121@Component 122struct NavRouterExample { 123 @State isActiveWLAN: boolean = false 124 @State isActiveBluetooth: boolean = false 125 126 build() { 127 Navigation() { 128 NavRouter() { 129 Row() { 130 Row() 131 .width(30) 132 .height(30) 133 .borderRadius(30) 134 .margin({ left: 3, right: 10 }) 135 .backgroundColor(Color.Pink) 136 Text(`WLAN`) 137 .fontSize(22) 138 .fontWeight(500) 139 .textAlign(TextAlign.Center) 140 } 141 .width('90%') 142 .height(60) 143 144 NavDestination() { 145 Flex({ direction: FlexDirection.Row }) { 146 Text('未找到可用WLAN').fontSize(30).padding({ left: 15 }) 147 } 148 }.title("WLAN") 149 } 150 .margin({ top: 10, bottom: 10 }) 151 .backgroundColor(this.isActiveWLAN ? '#ccc' : '#fff') 152 .borderRadius(20) 153 .mode(NavRouteMode.PUSH_WITH_RECREATE) 154 .onStateChange((isActivated: boolean) => { 155 this.isActiveWLAN = isActivated 156 }) 157 158 NavRouter() { 159 Row() { 160 Row() 161 .width(30) 162 .height(30) 163 .borderRadius(30) 164 .margin({ left: 3, right: 10 }) 165 .backgroundColor(Color.Pink) 166 Text(`蓝牙`) 167 .fontSize(22) 168 .fontWeight(500) 169 .textAlign(TextAlign.Center) 170 } 171 .width('90%') 172 .height(60) 173 174 NavDestination() { 175 Flex({ direction: FlexDirection.Row }) { 176 Text('未找到可用蓝牙').fontSize(30).padding({ left: 15 }) 177 } 178 }.title("蓝牙") 179 } 180 .margin({ top: 10, bottom: 10 }) 181 .backgroundColor(this.isActiveBluetooth ? '#ccc' : '#fff') 182 .borderRadius(20) 183 .mode(NavRouteMode.REPLACE) 184 .onStateChange((isActivated: boolean) => { 185 this.isActiveBluetooth = isActivated 186 }) 187 } 188 .height('100%') 189 .width('100%') 190 .title('设置') 191 .backgroundColor("#F2F3F5") 192 .titleMode(NavigationTitleMode.Free) 193 .mode(NavigationMode.Auto) 194 } 195} 196``` 197 198
