1# NavRouter 2 3The **\<NavRouter>** component provides default processing logic for responding to clicks, eliminating the need for manual logic definition. 4 5> **NOTE** 6> 7> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Child Components 10 11This component must contain two child components, the second of which must be **[\<NavDestination>](ts-basic-components-navdestination.md)**. 12 13> **NOTE** 14> 15> 16> 1. If there is only one child component, the navigation to the **\<NavDestination>** component does not work. 17> 2. If there is only the **\<NavDestination>** child component, the navigation does not work. 18> 3. If there are more than two child components, the excess child components are not displayed. 19> 4. If the second child component is not **\<NavDestination>**, the navigation does not work. 20 21## APIs 22 23### NavRouter 24 25NavRouter() 26 27### NavRouter<sup>10+</sup> 28 29NavRouter(value: RouteInfo) 30 31Provides route information so that clicking the **\<NavRouter>** component redirects the user to the specified navigation destination page. 32 33 34**Parameters** 35 36| Name | Type | Mandatory | Description | 37| ------- | ----------------------------------- | ---- | ------------- | 38| value | [RouteInfo](#routeinfo10) | No | Route information.| 39 40## Attributes 41 42In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 43 44| Name | Type | Description | 45| ----------------------------- | ---------------------------------------- | ---------------------------------------- | 46| mode | [NavRouteMode](#navroutemode) | Route mode used for redirection.<br>Default value: **NavRouteMode.PUSH_WITH_RECREATE**| 47 48## RouteInfo<sup>10+</sup> 49 50| Name | Type | Mandatory| Description | 51| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 52| name | string | Yes | Name of the navigation destination page to be redirected to.| 53| param | unknown | No | Parameter transferred during redirection.| 54 55## NavRouteMode 56 57| Name | Description | 58| ----- | ---------------- | 59| PUSH_WITH_RECREATE | The new navigation destination page replaces the current one. The current page is destroyed, but the information about this page is retained in the navigation stack.| 60| PUSH | The new navigation destination page overwrites the current one. The current page is not destroyed, and the information about this page is retained in the navigation stack.| 61| REPLACE | The new navigation destination page replaces the current one. The current page is destroyed, and the information about this page is removed from the navigation stack.| 62 63## Events 64 65| Name | Description | 66| ------------------------------------------------------- | ------------------------------------------------------------ | 67| onStateChange(callback: (isActivated: boolean) => void) | Called when the component activation status changes. The value **true** means that component is activated, and **false** means the opposite.<br> **NOTE**<br>**onStateChange(true)** is called when the **\<NavRouter>** component is activated and its **\<NavDestination>** child component is loaded. **onStateChange(false)** is called when the **\<NavDestination>** child component is not displayed.| 68 69## Example 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('No WLAN available.').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 (`Bluetooth`) 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 ('No Bluetooth device available.') .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 ('Settings') 126 .titleMode(NavigationTitleMode.Free) 127 .mode(NavigationMode.Auto) 128 .hideTitleBar(false) 129 .hideToolBar(true) 130 }.height('100%') 131 } 132} 133``` 134 135 136
