1# Navigator 2 3The **Navigator** component provides redirection. 4 5> **NOTE** 6> 7> This component is no longer maintained since API version 13. You are advised to use the [Navigation](ts-basic-components-navigation.md) component for page routing. 8> 9> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 10 11 12## Child Components 13 14Supported 15 16 17## APIs 18 19Navigator(value?: {target: string, type?: NavigationType}) 20 21**Atomic service API**: This API can be used in atomic services since API version 11. 22 23**System capability**: SystemCapability.ArkUI.ArkUI.Full 24 25**Parameters** 26 27| Name| Type | Mandatory| Description | 28| ------ | -------------- | ---- | ---------------------------------------------- | 29| target | string | Yes | Path of the target page to be redirected to. | 30| type | [NavigationType](#navigationtype) | No | Navigation type.<br>Default value: **NavigationType.Push**| 31 32## NavigationType 33 34**Atomic service API**: This API can be used in atomic services since API version 11. 35 36**System capability**: SystemCapability.ArkUI.ArkUI.Full 37 38| Name | Value | Description | 39| ------- | ------- | -------------------------- | 40| Push | 1 | Navigates to the specified page in the application. | 41| Replace | 2 | Replaces the current page with another one in the application and destroys the current page.| 42| Back | 3 | Returns to the specified page. If the specified page does not exist in the stack, no response is returned. If no page is specified, the previous page is returned to.| 43 44## Attributes 45 46### active 47 48active(value: boolean) 49 50Sets whether the **Navigator** component is activated. If the component is activated, the corresponding navigation takes effect. 51 52**Atomic service API**: This API can be used in atomic services since API version 11. 53 54**System capability**: SystemCapability.ArkUI.ArkUI.Full 55 56**Parameters** 57 58| Name| Type | Mandatory| Description | 59| ------ | ------- | ---- | -------------------------- | 60| value | boolean | Yes | Whether the **Navigator** component is activated. The value **true** means that the component is activated, and **false** means the opposite.| 61 62### params 63 64params(value: object) 65 66Sets the data that needs to be passed to the target page during redirection. 67 68**Atomic service API**: This API can be used in atomic services since API version 11. 69 70**System capability**: SystemCapability.ArkUI.ArkUI.Full 71 72**Parameters** 73 74| Name| Type | Mandatory| Description | 75| ------ | ------ | ---- | ------------------------------------------------------------ | 76| value | object | Yes | Data that needs to be passed to the target page during redirection. You can use [router.getParams()](../js-apis-router.md#routergetparams) to obtain the data on the target page.| 77 78### target 79 80target(value: string) 81 82Path of the target page to be redirected to. The target page must be added to the **main_pages.json** file. 83 84**Atomic service API**: This API can be used in atomic services since API version 11. 85 86**System capability**: SystemCapability.ArkUI.ArkUI.Full 87 88**Parameters** 89 90| Name| Type | Mandatory| Description | 91| ------ | ------ | ---- | ------------------ | 92| value | string | Yes | Path of the target page to be redirected to.| 93 94### type 95type(value: NavigationType) 96 97Sets the navigation type. 98 99**Atomic service API**: This API can be used in atomic services since API version 11. 100 101**System capability**: SystemCapability.ArkUI.ArkUI.Full 102 103**Parameters** 104 105| Name| Type | Mandatory| Description | 106| ------ | ------ | ---- | ---------------------------------------------- | 107| value | [NavigationType](#navigationtype) | Yes | Navigation type.<br>Default value: **NavigationType.Push**| 108 109## Example 110 111```ts 112// Navigator.ets 113@Entry 114@Component 115struct NavigatorExample { 116 @State active: boolean = false 117 @State name: NameObject = { name: 'news' } 118 119 build() { 120 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 121 Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) { 122 Text('Go to ' + this.name.name + ' page') 123 .width('100%').textAlign(TextAlign.Center) 124 }.params(new TextObject(this.name)) // Pass parameters to the Detail page. 125 126 Navigator() { 127 Text('Back to previous page').width('100%').textAlign(TextAlign.Center) 128 }.active(this.active) 129 .onClick(() => { 130 this.active = true 131 }) 132 }.height(150).width(350).padding(35) 133 } 134} 135 136interface NameObject { 137 name: string; 138} 139 140class TextObject { 141 text: NameObject; 142 143 constructor(text: NameObject) { 144 this.text = text; 145 } 146} 147``` 148 149```ts 150// Detail.ets 151import { router } from '@kit.ArkUI' 152 153@Entry 154@Component 155struct DetailExample { 156 // Receive the input parameters of Navigator.ets. 157 params: Record<string, NameObject> = router.getParams() as Record<string, NameObject> 158 @State name: NameObject = this.params.text 159 160 build() { 161 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 162 Navigator({ target: 'pages/container/navigator/Back', type: NavigationType.Push }) { 163 Text('Go to back page').width('100%').height(20) 164 } 165 166 Text('This is ' + this.name.name + ' page') 167 .width('100%').textAlign(TextAlign.Center) 168 } 169 .width('100%').height(200).padding({ left: 35, right: 35, top: 35 }) 170 } 171} 172 173interface NameObject { 174 name: string; 175} 176``` 177 178```ts 179// Back.ets 180@Entry 181@Component 182struct BackExample { 183 build() { 184 Column() { 185 Navigator({ target: 'pages/container/navigator/Navigator', type: NavigationType.Back }) { 186 Text('Return to Navigator Page').width('100%').textAlign(TextAlign.Center) 187 } 188 }.width('100%').height(200).padding({ left: 35, right: 35, top: 35 }) 189 } 190} 191``` 192 193 194
