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
112```ts
113// Navigator.ets
114@Entry
115@Component
116struct NavigatorExample {
117  @State active: boolean = false
118  @State name: NameObject = { name: 'news' }
119
120  build() {
121    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
122      Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) {
123        Text('Go to ' + this.name.name + ' page')
124          .width('100%').textAlign(TextAlign.Center)
125      }.params(new TextObject(this.name)) // 传参数到Detail页面
126
127      Navigator() {
128        Text('Back to previous page').width('100%').textAlign(TextAlign.Center)
129      }.active(this.active)
130      .onClick(() => {
131        this.active = true
132      })
133    }.height(150).width(350).padding(35)
134  }
135}
136
137interface NameObject {
138  name: string;
139}
140
141class TextObject {
142  text: NameObject;
143
144  constructor(text: NameObject) {
145    this.text = text;
146  }
147}
148```
149
150```ts
151// Detail.ets
152import { router } from '@kit.ArkUI'
153
154@Entry
155@Component
156struct DetailExample {
157  // 接收Navigator.ets的传参
158  params: Record<string, NameObject> = router.getParams() as Record<string, NameObject>
159  @State name: NameObject = this.params.text
160
161  build() {
162    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
163      Navigator({ target: 'pages/container/navigator/Back', type: NavigationType.Push }) {
164        Text('Go to back page').width('100%').height(20)
165      }
166
167      Text('This is ' + this.name.name + ' page')
168        .width('100%').textAlign(TextAlign.Center)
169    }
170    .width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
171  }
172}
173
174interface NameObject {
175  name: string;
176}
177```
178
179```ts
180// Back.ets
181@Entry
182@Component
183struct BackExample {
184  build() {
185    Column() {
186      Navigator({ target: 'pages/container/navigator/Navigator', type: NavigationType.Back }) {
187        Text('Return to Navigator Page').width('100%').textAlign(TextAlign.Center)
188      }
189    }.width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
190  }
191}
192```
193
194![zh-cn_image_0000001219864145](figures/zh-cn_image_0000001219864145.gif)
195