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 | 是 | 路由组件是否处于激活状态。设置为true时，组件处于激活态。设置为false时，组件不处于激活态。 | 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```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)) // 传参数到Detail页面 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 151@Entry 152@Component 153struct DetailExample { 154 // 接收Navigator.ets的传参 155 params: Record<string, NameObject> = this.getUIContext().getRouter().getParams() as Record<string, NameObject> 156 @State name: NameObject = this.params.text 157 158 build() { 159 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 160 Navigator({ target: 'pages/container/navigator/Back', type: NavigationType.Push }) { 161 Text('Go to back page').width('100%').height(20) 162 } 163 164 Text('This is ' + this.name.name + ' page') 165 .width('100%').textAlign(TextAlign.Center) 166 } 167 .width('100%').height(200).padding({ left: 35, right: 35, top: 35 }) 168 } 169} 170 171interface NameObject { 172 name: string; 173} 174``` 175 176```ts 177// Back.ets 178@Entry 179@Component 180struct BackExample { 181 build() { 182 Column() { 183 Navigator({ target: 'pages/container/navigator/Navigator', type: NavigationType.Back }) { 184 Text('Return to Navigator Page').width('100%').textAlign(TextAlign.Center) 185 } 186 }.width('100%').height(200).padding({ left: 35, right: 35, top: 35 }) 187 } 188} 189``` 190 191 192
