1# @system.router (Page Routing)
2
3The **Router** module provides APIs to access pages through URIs.
4
5> **NOTE**
6>
7> - The APIs of this module are no longer maintained since API version 8. You are advised to use [@ohos.router](js-apis-router.md) instead.
8>
9>
10> - The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.
11
12
13## Modules to Import
14
15
16```ts
17import router from '@system.router';
18```
19
20## router.push
21
22push(options: RouterOptions): void
23
24Navigates to a specified page in the application.
25
26**System capability**: SystemCapability.ArkUI.ArkUI.Full
27
28**Parameters**
29
30| Name    | Type                             | Mandatory  | Description                        |
31| ------- | ------------------------------- | ---- | -------------------------- |
32| options | [RouterOptions](#routeroptions) | Yes   | Page routing parameters. For details, see **RouterOptions**.|
33
34**Example**
35
36```ts
37// Current page
38import router from '@system.router';
39class A{
40  pushPage() {
41    router.push({
42      uri: 'pages/routerpage2/routerpage2',
43      params: {
44        data1: 'message',
45        data2: {
46          data3: [123, 456, 789]
47        }
48      }
49    });
50  }
51}
52export default new A()
53```
54
55
56```ts
57// routerpage2 page
58class B{
59  data:Record<string,string> = {'data1': 'default'}
60  data2:Record<string,number[]> = {'data3': [1, 2, 3]}
61  onInit() {
62    console.info('showData1:' + this.data.data1);
63    console.info('showData3:' + this.data2.data3);
64  }
65}
66export default new B()
67```
68
69> **NOTE**<br>
70> The page routing stack supports a maximum of 32 pages.
71
72
73## router.replace
74
75replace(options: RouterOptions): void
76
77Replaces the current page with another one in the application and destroys the current page.
78
79**System capability**: SystemCapability.ArkUI.ArkUI.Lite
80
81**Parameters**
82
83| Name    | Type                             | Mandatory  | Description                        |
84| ------- | ------------------------------- | ---- | -------------------------- |
85| options | [RouterOptions](#routeroptions) | Yes   | Page routing parameters. For details, see **RouterOptions**.|
86
87**Example**
88
89```ts
90// Current page
91import router from '@system.router';
92class C{
93  replacePage() {
94    router.replace({
95      uri: 'pages/detail/detail',
96      params: {
97        data1: 'message'
98      }
99    });
100  }
101}
102export default new C()
103```
104
105
106```ts
107// detail page
108class Area {
109  data:Record<string,string> = {'data1': 'default'}
110  onInit() {
111    console.info('showData1:' + this.data)
112  }
113}
114export default new Area()
115```
116
117## router.back
118
119back(options?: BackRouterOptions): void
120
121Returns to the previous page or a specified page.
122
123**System capability**: SystemCapability.ArkUI.ArkUI.Full
124
125**Parameters**
126
127| Name    | Type                                     | Mandatory  | Description                     |
128| ------- | --------------------------------------- | ---- | ----------------------- |
129| options | [BackRouterOptions](#backrouteroptions) | No   | For details, see **BackRouterOptions**.|
130
131**Example**
132
133```ts
134// index page
135import router from '@system.router';
136class D{
137  indexPushPage() {
138    router.push({
139      uri: 'pages/detail/detail'
140    });
141  }
142}
143export default new D()
144```
145
146
147```ts
148// detail page
149import router from '@system.router';
150class E{
151  detailPushPage() {
152    router.push({
153      uri: 'pages/mall/mall'
154    });
155  }
156}
157export default new E()
158```
159
160
161```ts
162// Navigate from the mall page to the detail page through router.back().
163import router from '@system.router';
164class F{
165  mallBackPage() {
166    router.back();
167  }
168}
169export default new F()
170```
171
172
173```ts
174// Navigate from the detail page to the index page through router.back().
175import router from '@system.router';
176class G{
177  defaultBack() {
178    router.back();
179  }
180}
181export default new G()
182```
183
184
185```ts
186// Return to the detail page through router.back().
187import router from '@system.router';
188class H{
189  backToDetail() {
190    router.back({uri:'pages/detail/detail'});
191  }
192}
193export default new H()
194```
195
196> **NOTE**
197>
198> In the example, the **uri** field indicates the page route, which is specified by the **pages** list in the **config.json** file.
199
200## router.getParams<sup>7+</sup>
201
202getParams(): ParamsInterface
203
204Obtains parameter information about the current page.
205
206**System capability**: SystemCapability.ArkUI.ArkUI.Full
207
208**Return value**
209
210| Type                                 | Description                   |
211| ----------------------------------- | --------------------- |
212| [ParamsInterface](#paramsinterface) | For details, see **ParamsInterface**.|
213
214## router.clear
215
216clear(): void
217
218Clears all historical pages in the stack and retains only the current page at the top of the stack.
219
220**System capability**: SystemCapability.ArkUI.ArkUI.Full
221
222**Example**
223
224```ts
225import router from '@system.router';
226class I{
227  clearPage() {
228    router.clear();
229  }
230}
231export default new I()
232```
233
234## router.getLength
235
236getLength(): string
237
238Obtains the number of pages in the current stack.
239
240**System capability**: SystemCapability.ArkUI.ArkUI.Full
241
242**Return value**
243
244| Type    | Description                |
245| ------ | ------------------ |
246| string | Number of pages in the stack. The maximum value is **32**.|
247
248**Example**
249
250```ts
251import router from '@system.router';
252class J{
253  getLength() {
254    let size = router.getLength();
255    console.log('pages stack size = ' + size);
256  }
257}
258export default new J()
259```
260
261## router.getState
262
263getState(): RouterState
264
265Obtains state information about the current page.
266
267**System capability**: SystemCapability.ArkUI.ArkUI.Full
268
269**Return value**
270
271| Type                       | Description               |
272| --------------------------- | ----------------- |
273| [RouterState](#routerstate) | For details, see **RouterState**.|
274
275**Example**
276
277```ts
278import router from '@system.router';
279class K{
280  getState() {
281    let page = router.getState();
282    console.log('current index = ' + page.index);
283    console.log('current name = ' + page.name);
284    console.log('current path = ' + page.path);
285  }
286}
287export default new K()
288```
289
290## router.enableAlertBeforeBackPage<sup>6+</sup>
291
292enableAlertBeforeBackPage(options: EnableAlertBeforeBackPageOptions): void
293
294Enables the display of a confirm dialog box before returning to the previous page.
295
296**System capability**: SystemCapability.ArkUI.ArkUI.Full
297
298**Parameters**
299
300| Name    | Type                                      | Mandatory  | Description                                    |
301| ------- | ---------------------------------------- | ---- | -------------------------------------- |
302| options | [EnableAlertBeforeBackPageOptions](#enablealertbeforebackpageoptions6) | Yes   | For details, see **EnableAlertBeforeBackPageOptions**.|
303
304**Example**
305
306```ts
307import router from '@system.router';
308class L{
309  enableAlertBeforeBackPage() {
310    router.enableAlertBeforeBackPage({
311      message: 'Message Info',
312      success: ()=> {
313        console.log('success');
314      },
315      cancel: ()=> {
316        console.log('cancel');
317      }
318    });
319  }
320}
321export default new L()
322```
323
324## router.disableAlertBeforeBackPage<sup>6+</sup>
325
326disableAlertBeforeBackPage(options?: DisableAlertBeforeBackPageOptions): void
327
328Disables the display of a confirm dialog box before returning to the previous page.
329
330**System capability**: SystemCapability.ArkUI.ArkUI.Full
331
332**Parameters**
333
334| Name    | Type                                      | Mandatory  | Description                                     |
335| ------- | ---------------------------------------- | ---- | --------------------------------------- |
336| options | [DisableAlertBeforeBackPageOptions](#disablealertbeforebackpageoptions6) | No   | For details, see **DisableAlertBeforeBackPageOptions**.|
337
338**Example**
339
340```ts
341import router from '@system.router';
342class Z{
343  disableAlertBeforeBackPage() {
344    router.disableAlertBeforeBackPage({
345      success: ()=> {
346        console.log('success');
347      },
348      cancel: ()=> {
349        console.log('cancel');
350      }
351    });
352  }
353}
354export default new Z()
355```
356
357## RouterOptions
358
359Defines the page routing parameters.
360
361**System capability**: SystemCapability.ArkUI.ArkUI.Lite
362
363| Name  | Type| Mandatory| Description                                                        |
364| ------ | -------- | ---- | ------------------------------------------------------------ |
365| uri | string   | Yes  | URI of the target page, in either of the following formats:<br>1. Absolute path, which is provided by the **pages** list in the **config.json** file. Example:<br>- pages/index/index<br> - pages/detail/detail<br>2. Specific path. If the URI is a slash (/), the home page is displayed.|
366| params | object   | No  | Data that needs to be passed to the target page during redirection. The target page can use **router.getParams()** to obtain the passed parameters, for example, **this.keyValue** (**keyValue** is the value of a key in **params**). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by **key** already exists on the target page, the passed value of the key will be displayed.|
367
368
369## BackRouterOptions
370
371Defines the parameters for routing back.
372
373**System capability**: The items in the table below require different system capabilities. For details, see the table.
374
375| Name  | Type| Mandatory| Description                                                        |
376| ------ | -------- | ---- | ------------------------------------------------------------ |
377| uri<sup>7+</sup> | string   | No  | URI of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If this parameter is not set, the application returns to the previous page.<br>**System capability**: SystemCapability.ArkUI.ArkUI.Full|
378| params<sup>7+</sup> | object   | No  | Data that needs to be passed to the target page during redirection.<br>**System capability**: SystemCapability.ArkUI.ArkUI.Lite|
379
380## RouterState
381
382Defines the page state.
383
384**System capability**: SystemCapability.ArkUI.ArkUI.Full
385
386| Name   | Type  | Mandatory  | Description                                |
387| ----- | ------ | ---- | ---------------------------------- |
388| index | number | Yes   | Index of the current page in the stack. The index starts from 1 from the bottom to the top of the stack.|
389| name  | string | Yes   | Name of the current page, that is, the file name.                 |
390| path  | string | Yes   | Path of the current page.                        |
391
392## EnableAlertBeforeBackPageOptions<sup>6+</sup>
393
394Defines the **EnableAlertBeforeBackPage** parameters.
395
396**System capability**: SystemCapability.ArkUI.ArkUI.Full
397
398| Name    | Type                | Mandatory| Description                                              |
399| -------- | ------------------------ | ---- | -------------------------------------------------- |
400| message  | string                   | Yes  | Content displayed in the confirm dialog box.                                  |
401| success  | (errMsg: string) => void | No  | Called when the **OK** button in the confirm dialog box is clicked. **errMsg** indicates the returned information.|
402| cancel   | (errMsg: string) => void | No  | Called when the **Cancel** button in the confirm dialog box is clicked. **errMsg** indicates the returned information.|
403| complete | () => void               | No  | Called when the dialog box is closed.                          |
404
405## DisableAlertBeforeBackPageOptions<sup>6+</sup>
406
407Defines the **DisableAlertBeforeBackPage** parameters.
408
409**System capability**: SystemCapability.ArkUI.ArkUI.Full
410
411| Name    | Type                | Mandatory| Description                                              |
412| -------- | ------------------------ | ---- | -------------------------------------------------- |
413| success  | (errMsg: string) => void | No  | Called when the dialog box is closed. **errMsg** indicates the returned information.|
414| cancel   | (errMsg: string) => void | No  | Called when the dialog box fails to be closed. **errMsg** indicates the returned information.|
415| complete | () => void               | No  | Called when the dialog box is closed.                          |
416
417## ParamsInterface
418
419| Name         | Type| Description          |
420| ------------- | -------- | -------------- |
421| [key: string] | object   | List of routing parameters.|
422