1# Navigator 2 3路由容器组件，提供路由跳转能力。 4 5> **说明：** 6> 7> 从API Version 13 开始，该组件不再维护，推荐使用组件[Navigation](ts-basic-components-navigation.md)进行页面路由。 8> 9> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 子组件 13 14可以包含子组件。 15 16 17## 接口 18 19Navigator(value?: {target: string, type?: NavigationType}) 20 21**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 22 23**系统能力：** SystemCapability.ArkUI.ArkUI.Full 24 25**参数：** 26 27| 参数名 | 类型 | 必填 | 说明 | 28| ------ | -------------- | ---- | ---------------------------------------------- | 29| target | string | 是 | 指定跳转目标页面的路径。 | 30| type | [NavigationType](#navigationtype枚举说明) | 否 | 指定路由方式。<br/>默认值：NavigationType.Push | 31 32## NavigationType枚举说明 33 34**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 35 36**系统能力：** SystemCapability.ArkUI.ArkUI.Full 37 38| 名称 | 值 | 说明 | 39| ------- | ------- | -------------------------- | 40| Push | 1 | 跳转到应用内的指定页面。 | 41| Replace | 2 | 用应用内的某个页面替换当前页面，并销毁被替换的页面。 | 42| Back | 3 | 返回到指定的页面。指定的页面不存在栈中时不响应。未传入指定的页面时返回上一页。 | 43 44## 属性 45 46### active 47 48active(value: boolean) 49 50设置当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。 51 52**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 53 54**系统能力：** SystemCapability.ArkUI.ArkUI.Full 55 56**参数：** 57 58| 参数名 | 类型 | 必填 | 说明 | 59| ------ | ------- | ---- | -------------------------- | 60| value | boolean | 是 | 路由组件是否处于激活状态。 | 61 62### params 63 64params(value: object) 65 66设置跳转时传递到目标页面的数据。 67 68**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 69 70**系统能力：** SystemCapability.ArkUI.ArkUI.Full 71 72**参数：** 73 74| 参数名 | 类型 | 必填 | 说明 | 75| ------ | ------ | ---- | ------------------------------------------------------------ | 76| value | object | 是 | 跳转时要同时传递到目标页面的数据，可在目标页面使用[router.getParams()](../js-apis-router.md#routergetparams)获得。 | 77 78### target 79 80target(value: string) 81 82设置跳转目标页面的路径。 目标页面需加入main_pages.json文件中。 83 84**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 85 86**系统能力：** SystemCapability.ArkUI.ArkUI.Full 87 88**参数：** 89 90| 参数名 | 类型 | 必填 | 说明 | 91| ------ | ------ | ---- | ------------------ | 92| value | string | 是 | 转目标页面的路径。 | 93 94### type 95type(value: NavigationType) 96 97设置路由跳转方式。 98 99**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 100 101**系统能力：** SystemCapability.ArkUI.ArkUI.Full 102 103**参数：** 104 105| 参数名 | 类型 | 必填 | 说明 | 106| ------ | ------ | ---- | ---------------------------------------------- | 107| value | [NavigationType](#navigationtype枚举说明) | 是 | 路由跳转方式。<br/>默认值：NavigationType.Push | 108 109## 示例 110 111<!--code_no_check--> 112 113```ts 114// Navigator.ets 115@Entry 116@Component 117struct NavigatorExample { 118 @State active: boolean = false 119 @State name: NameObject = { name: 'news' } 120 121 build() { 122 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 123 Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) { 124 Text('Go to ' + this.name.name + ' page') 125 .width('100%').textAlign(TextAlign.Center) 126 }.params(new TextObject(this.name)) // 传参数到Detail页面 127 128 Navigator() { 129 Text('Back to previous page').width('100%').textAlign(TextAlign.Center) 130 }.active(this.active) 131 .onClick(() => { 132 this.active = true 133 }) 134 }.height(150).width(350).padding(35) 135 } 136} 137 138interface NameObject { 139 name: string; 140} 141 142class TextObject { 143 text: NameObject; 144 145 constructor(text: NameObject) { 146 this.text = text; 147 } 148} 149``` 150 151```ts 152// Detail.ets 153import { router } from '@kit.ArkUI' 154 155@Entry 156@Component 157struct DetailExample { 158 // 接收Navigator.ets的传参 159 params: Record<string, NameObject> = router.getParams() as Record<string, NameObject> 160 @State name: NameObject = this.params.text 161 162 build() { 163 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 164 Navigator({ target: 'pages/container/navigator/Back', type: NavigationType.Push }) { 165 Text('Go to back page').width('100%').height(20) 166 } 167 168 Text('This is ' + this.name.name + ' page') 169 .width('100%').textAlign(TextAlign.Center) 170 } 171 .width('100%').height(200).padding({ left: 35, right: 35, top: 35 }) 172 } 173} 174 175interface NameObject { 176 name: string; 177} 178``` 179 180```ts 181// Back.ets 182@Entry 183@Component 184struct BackExample { 185 build() { 186 Column() { 187 Navigator({ target: 'pages/container/navigator/Navigator', type: NavigationType.Back }) { 188 Text('Return to Navigator Page').width('100%').textAlign(TextAlign.Center) 189 } 190 }.width('100%').height(200).padding({ left: 35, right: 35, top: 35 }) 191 } 192} 193``` 194 195 196
