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```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
151import { router } from '@kit.ArkUI'
152
153@Entry
154@Component
155struct DetailExample {
156  // 接收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![zh-cn_image_0000001219864145](figures/zh-cn_image_0000001219864145.gif)
194