1# NavPushPathHelper
2
3On the initial launch, the atomic service only downloads and installs the main package and its dependencies. Therefore, if the [NavDestination](ts-basic-components-navdestination.md) resides in a different HSP subpackage that is not a dependency of the main package, you'll need to use **NavPushPathHelper** to download and install the corresponding HSP subpackage first. After that, push the specified **NavDestination** page information onto the stack. This way, you enable [Navigation](ts-basic-components-navigation.md) to support dynamic loading of the HSP subpackage before the navigation occurs.
4
5> **NOTE**
6>
7> This component is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
8
9## Modules to Import
10
11```ts
12import { NavPushPathHelper } from '@kit.ArkUI'
13```
14
15## Child Components
16
17Not supported
18
19## Attributes
20
21The [universal attributes](ts-universal-attributes-size.md) are not supported.
22
23## NavPushPathHelper
24
25Encapsulates all navigation APIs for [NavPathStack](ts-basic-components-navigation.md#navpathstack10). **NavPushPathHelper** holds a **NavPathStack** object and checks for the existence of a subpackage within its encapsulated navigation APIs. If the subpackage is absent, it dynamically downloads the subpackage. Once the download is complete, it calls the appropriate API of **NavPathStack** to push the specified [NavDestination](ts-basic-components-navdestination.md) page onto the stack. For details, see [Example](#example).
26
27### constructor
28
29constructor(navPathStack: NavPathStack)
30
31A constructor used to create a **NavPushPathHelper** object.
32
33**Atomic service API**: This API can be used in atomic services since API version 12.
34
35**System capability**: SystemCapability.ArkUI.ArkUI.Full
36
37**Parameters**
38
39| Name  | Type                           | Mandatory  |  Description        |
40| ---- | ----------------------------- | ---- | -------------------- |
41| navPathStack | [NavPathStack](ts-basic-components-navigation.md#navpathstack10) | Yes   | [Navigation](ts-basic-components-navigation.md) stack.|
42
43### pushPath
44
45pushPath(moduleName: string, info: NavPathInfo, animated?: boolean): Promise\<void\>
46
47Checks for the target subpackgae and, if it is not present, initiates a download using the specified module name. Once the subpackage is downloaded, the API pushes the [NavDestination](ts-basic-components-navdestination.md) page, as indicated by **info**, onto the navigation stack. This API uses a promise to return the result.
48
49**Atomic service API**: This API can be used in atomic services since API version 12.
50
51**System capability**: SystemCapability.ArkUI.ArkUI.Full
52
53**Parameters**
54
55| Name  | Type                           | Mandatory  | Description                |
56| ---- | ----------------------------- | ---- | -------------------- |
57| moduleName | string | Yes   | Module name of the package where the [NavDestination](ts-basic-components-navdestination.md) page is located.|
58| info | [NavPathInfo](ts-basic-components-navigation.md#navpathinfo10) | Yes   | Information about the [NavDestination](ts-basic-components-navdestination.md) page.|
59| animated | boolean | No   | Whether to support transition animation.<br>Default value: **true**|
60
61**Return value**
62
63| Type               | Description       |
64| ------------------- | --------- |
65| Promise\<void\> | Promise used to return the result.|
66
67**Error codes**
68
69For details about the error codes, see [Router Error Codes](../errorcode-router.md).
70
71| ID  | Error Message|
72| --------- | ------- |
73| 300001    | hsp silent install fail.|
74
75### pushPath
76
77pushPath(moduleName: string, info: NavPathInfo, options?: NavigationOptions): Promise\<void\>
78
79Checks for the target subpackgae and, if it is not present, initiates a download using the specified module name. Once the subpackage is downloaded, the API pushes the [NavDestination](ts-basic-components-navdestination.md) page, as indicated by **info**, onto the navigation stack. This API uses a promise to return the result. The behavior can vary based on [LaunchMode](ts-basic-components-navigation.md#launchmode12) specified in the **options** parameter.
80
81**Atomic service API**: This API can be used in atomic services since API version 12.
82
83**System capability**: SystemCapability.ArkUI.ArkUI.Full
84
85**Parameters**
86
87| Name  | Type                           | Mandatory  | Description                 |
88| ---- | ----------------------------- | ---- | -------------------- |
89| moduleName | string | Yes   | Module name of the package where the [NavDestination](ts-basic-components-navdestination.md) page is located.|
90| info | [NavPathInfo](ts-basic-components-navigation.md#navpathinfo10) | Yes   | Information about the [NavDestination](ts-basic-components-navdestination.md) page.|
91| options | [NavigationOptions](ts-basic-components-navigation.md#navigationoptions12) | No   | Navigation options.|
92
93**Return value**
94
95| Type               | Description       |
96| ------------------- | --------- |
97| Promise\<void\> | Promise used to return the result.|
98
99**Error codes**
100
101For details about the error codes, see [Router Error Codes](../errorcode-router.md).
102
103| ID  | Error Message|
104| --------- | ------- |
105| 300001    | hsp silent install fail.|
106
107### pushPathByName
108
109pushPathByName(moduleName: string, name: string, param: Object, animated?: boolean): Promise\<void\>
110
111Checks for the target subpackgae and, if it is not present, initiates a download using the specified module name. Once the subpackage is downloaded, the API pushes the [NavDestination](ts-basic-components-navdestination.md) page, as indicated by **name**, onto the navigation stack, along with the data specified by **param**. This API uses a promise to return the result.
112
113**Atomic service API**: This API can be used in atomic services since API version 12.
114
115**System capability**: SystemCapability.ArkUI.ArkUI.Full
116
117**Parameters**
118
119| Name   | Type     | Mandatory  | Description                   |
120| ----- | ------- | ---- | --------------------- |
121| moduleName | string | Yes   | Module name of the package where the [NavDestination](ts-basic-components-navdestination.md) page is located.|
122| name  | string  | Yes   | Name of the [NavDestination](ts-basic-components-navdestination.md) page.  |
123| param | Object | Yes   | Settings of the [NavDestination](ts-basic-components-navdestination.md) page.|
124| animated | boolean | No   | Whether to support transition animation.<br>Default value: **true**|
125
126**Return value**
127
128| Type               | Description       |
129| ------------------- | --------- |
130| Promise\<void\> | Promise used to return the result.|
131
132**Error codes**
133
134For details about the error codes, see [Router Error Codes](../errorcode-router.md).
135
136| ID  | Error Message|
137| --------- | ------- |
138| 300001    | hsp silent install fail.|
139
140### pushPathByName
141
142pushPathByName(moduleName: string, name: string, param: Object, onPop: Callback\<PopInfo>, animated?: boolean): Promise\<void\>
143
144Checks for the target subpackgae and, if it is not present, initiates a download using the specified module name. Once the subpackage is downloaded, the API pushes the [NavDestination](ts-basic-components-navdestination.md) page, as indicated by **name**, onto the navigation stack, along with the data specified by **param**. The **onPop** callback handles the return results when the page is popped from the stack.This API uses a promise to return the result.
145
146**Atomic service API**: This API can be used in atomic services since API version 12.
147
148**System capability**: SystemCapability.ArkUI.ArkUI.Full
149
150**Parameters**
151
152| Name| Type| Mandatory| Description|
153|------|------|------|------|
154| moduleName | string | Yes   | Module name of the package where the [NavDestination](ts-basic-components-navdestination.md) page is located.|
155| name  | string  | Yes   | Name of the [NavDestination](ts-basic-components-navdestination.md) page.  |
156| param | Object | Yes   | Settings of the [NavDestination](ts-basic-components-navdestination.md) page.|
157| onPop | Callback\<[PopInfo](ts-basic-components-navigation.md#popinfo11)> | Yes| Callback used to receive the result.|
158| animated | boolean | No   | Whether to support transition animation.<br>Default value: **true**|
159
160**Return value**
161
162| Type               | Description       |
163| ------------------- | --------- |
164| Promise\<void\> | Promise used to return the result.|
165
166**Error codes**
167
168For details about the error codes, see [Router Error Codes](../errorcode-router.md).
169
170| ID  | Error Message|
171| --------- | ------- |
172| 300001    | hsp silent install fail.|
173
174### pushDestination
175
176pushDestination(moduleName: string, info: NavPathInfo, animated?: boolean): Promise\<void\>
177
178Checks for the target subpackgae and, if it is not present, initiates a download using the specified module name. Once the subpackage is downloaded, the API pushes the [NavDestination](ts-basic-components-navdestination.md) page, as indicated by **info**, onto the navigation stack. This API uses a promise to return the result.
179
180**Atomic service API**: This API can be used in atomic services since API version 12.
181
182**System capability**: SystemCapability.ArkUI.ArkUI.Full
183
184**Parameters**
185
186| Name  | Type                           | Mandatory  | Description                  |
187| ---- | ----------------------------- | ---- | -------------------- |
188| moduleName | string | Yes   | Module name of the package where the [NavDestination](ts-basic-components-navdestination.md) page is located.|
189| info | [NavPathInfo](ts-basic-components-navigation.md#navpathinfo10) | Yes   | Information about the [NavDestination](ts-basic-components-navdestination.md) page.|
190| animated | boolean | No   | Whether to support transition animation.<br>Default value: **true**|
191
192**Return value**
193
194| Type               | Description       |
195| ------------------- | --------- |
196| Promise\<void\> | Promise used to return the result.|
197
198**Error codes**
199
200For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md) and [Router Error Codes](../errorcode-router.md).
201
202| ID  | Error Message|
203| --------- | ------- |
204| 401      | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameters types. 3. Parameter verification failed.   |
205| 100001    | Internal error.|
206| 100005    | Builder function not registered. |
207| 100006    | NavDestination not found.|
208| 300001    | hsp silent install fail.|
209
210### pushDestination
211
212pushDestination(moduleName: string, info: NavPathInfo, options?: NavigationOptions): Promise\<void\>
213
214Checks for the target subpackgae and, if it is not present, initiates a download using the specified module name. Once the subpackage is downloaded, the API pushes the [NavDestination](ts-basic-components-navdestination.md) page, as indicated by **info**, onto the navigation stack. This API uses a promise to return the result. The behavior can vary based on [LaunchMode](ts-basic-components-navigation.md#launchmode12) specified in the **options** parameter.
215
216**Atomic service API**: This API can be used in atomic services since API version 12.
217
218**System capability**: SystemCapability.ArkUI.ArkUI.Full
219
220**Parameters**
221
222| Name  | Type                           | Mandatory  | Description                 |
223| ---- | ----------------------------- | ---- | -------------------- |
224| moduleName | string | Yes   | Module name of the package where the [NavDestination](ts-basic-components-navdestination.md) page is located.|
225| info | [NavPathInfo](ts-basic-components-navigation.md#navpathinfo10) | Yes   | Information about the [NavDestination](ts-basic-components-navdestination.md) page.|
226| options | [NavigationOptions](ts-basic-components-navigation.md#navigationoptions12) | No   | Navigation options.|
227
228**Return value**
229
230| Type               | Description       |
231| ------------------- | --------- |
232| Promise\<void\> | Promise used to return the result.|
233
234**Error codes**
235
236For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md) and [Router Error Codes](../errorcode-router.md).
237
238| ID  | Error Message|
239| --------- | ------- |
240| 401      | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameters types. 3. Parameter verification failed.   |
241| 100001    | Internal error.|
242| 100005    | Builder function not registered. |
243| 100006    | NavDestination not found.|
244| 300001    | hsp silent install fail.|
245
246### pushDestinationByName
247
248pushDestinationByName(moduleName: string, name: string, param: Object, animated?: boolean): Promise\<void\>
249
250Checks for the target subpackgae and, if it is not present, initiates a download using the specified module name. Once the subpackage is downloaded, the API pushes the [NavDestination](ts-basic-components-navdestination.md) page, as indicated by **name**, onto the navigation stack, along with the data specified by **param**. This API uses a promise to return the result.
251
252**Atomic service API**: This API can be used in atomic services since API version 12.
253
254**System capability**: SystemCapability.ArkUI.ArkUI.Full
255
256**Parameters**
257
258| Name   | Type     | Mandatory  | Description                   |
259| ----- | ------- | ---- | --------------------- |
260| moduleName | string | Yes   | Module name of the package where the [NavDestination](ts-basic-components-navdestination.md) page is located.|
261| name  | string  | Yes   | Name of the [NavDestination](ts-basic-components-navdestination.md) page.  |
262| param | Object | Yes   | Settings of the [NavDestination](ts-basic-components-navdestination.md) page.|
263| animated | boolean | No   | Whether to support transition animation.<br>Default value: **true**|
264
265**Return value**
266
267| Type               | Description       |
268| ------------------- | --------- |
269| Promise\<void\> | Promise used to return the result.|
270
271**Error codes**
272
273For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md) and [Router Error Codes](../errorcode-router.md).
274
275| ID  | Error Message|
276| --------- | ------- |
277| 401      | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameters types. 3. Parameter verification failed.  |
278| 100001    | Internal error.|
279| 100005    | Builder function not registered. |
280| 100006    | NavDestination not found.|
281| 300001    | hsp silent install fail.|
282
283### pushDestinationByName
284
285pushDestinationByName(moduleName: string, name: string, param: Object, onPop: Callback\<PopInfo>, animated?: boolean): Promise\<void\>
286
287Checks for the target subpackgae and, if it is not present, initiates a download using the specified module name. Once the subpackage is downloaded, the API pushes the [NavDestination](ts-basic-components-navdestination.md) page, as indicated by **name**, onto the navigation stack, along with the data specified by **param**. The **onPop** callback handles the return results when the page is popped from the stack.This API uses a promise to return the result.
288
289**Atomic service API**: This API can be used in atomic services since API version 12.
290
291**System capability**: SystemCapability.ArkUI.ArkUI.Full
292
293**Parameters**
294
295| Name   | Type     | Mandatory  | Description                 |
296| ----- | ------- | ---- | --------------------- |
297| moduleName | string | Yes   | Module name of the package where the [NavDestination](ts-basic-components-navdestination.md) page is located.|
298| name  | string  | Yes   | Name of the [NavDestination](ts-basic-components-navdestination.md) page.  |
299| param | Object | Yes   | Settings of the [NavDestination](ts-basic-components-navdestination.md) page.|
300| onPop | Callback\<[PopInfo](ts-basic-components-navigation.md#popinfo11)> | Yes   | Callback used to handle the result returned when the page is popped out of the stack.|
301| animated | boolean | No   | Whether to support transition animation.<br>Default value: **true**|
302
303**Return value**
304
305| Type               | Description       |
306| ------------------- | --------- |
307| Promise\<void\> | Promise used to return the result.|
308
309**Error codes**
310
311For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md) and [Router Error Codes](../errorcode-router.md).
312
313| ID  | Error Message|
314| --------- | ------- |
315| 401      | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameters types. 3. Parameter verification failed.  |
316| 100001    | Internal error.|
317| 100005    | Builder function not registered. |
318| 100006    | NavDestination not found.|
319| 300001    | hsp silent install fail.|
320
321### replacePath
322
323replacePath(moduleName: string, info: NavPathInfo, animated?: boolean): Promise\<void\>
324
325Checks for the target subpackgae and, if it is not present, initiates a download using the specified module name. Once the subpackage is downloaded, the API pops the top page from the current navigation stack and pushes the [NavDestination](ts-basic-components-navdestination.md) page, as indicated by **info**, onto the stack. This API uses a promise to return the result.
326
327**Atomic service API**: This API can be used in atomic services since API version 12.
328
329**System capability**: SystemCapability.ArkUI.ArkUI.Full
330
331**Parameters**
332
333| Name | Type                           | Mandatory  | Description                  |
334| ---- | ----------------------------- | ---- | -------------------- |
335| moduleName | string | Yes   | Module name of the package where the [NavDestination](ts-basic-components-navdestination.md) page is located.|
336| info | [NavPathInfo](ts-basic-components-navigation.md#navpathinfo10) | Yes   | Parameters of the page to replace the top of the navigation stack.|
337| animated | boolean | No   | Whether to support transition animation.<br>Default value: **true**|
338
339**Return value**
340
341| Type               | Description       |
342| ------------------- | --------- |
343| Promise\<void\> | Promise used to return the result.|
344
345**Error codes**
346
347For details about the error codes, see [Router Error Codes](../errorcode-router.md).
348
349| ID  | Error Message|
350| --------- | ------- |
351| 300001    | hsp silent install fail.|
352
353### replacePath
354
355replacePath(moduleName: string, info: NavPathInfo, options?: NavigationOptions): Promise\<void\>
356
357Checks for the target subpackgae and, if it is not present, initiates a download using the specified module name. Once the subpackage is downloaded, the API pops the top page from the current navigation stack and pushes the [NavDestination](ts-basic-components-navdestination.md) page, as indicated by **info**, onto the stack. This API uses a promise to return the result. The behavior can vary based on [LaunchMode](ts-basic-components-navigation.md#launchmode12) specified in the **options** parameter.
358
359**Atomic service API**: This API can be used in atomic services since API version 12.
360
361**System capability**: SystemCapability.ArkUI.ArkUI.Full
362
363**Parameters**
364
365| Name  | Type                           | Mandatory  | Description                  |
366| ---- | ----------------------------- | ---- | -------------------- |
367| moduleName | string | Yes   | Module name of the package where the [NavDestination](ts-basic-components-navdestination.md) page is located.|
368| info | [NavPathInfo](ts-basic-components-navigation.md#navpathinfo10) | Yes   | Parameters of the page to replace the top of the navigation stack.|
369| options | [NavigationOptions](ts-basic-components-navigation.md#navigationoptions12) | No   | Navigation options.|
370
371**Return value**
372
373| Type               | Description       |
374| ------------------- | --------- |
375| Promise\<void\> | Promise used to return the result.|
376
377**Error codes**
378
379For details about the error codes, see [Router Error Codes](../errorcode-router.md).
380
381| ID  | Error Message|
382| --------- | ------- |
383| 300001    | hsp silent install fail.|
384
385### replacePathByName
386
387replacePathByName(moduleName: string, name: string, param: Object, animated?: boolean): Promise\<void\>
388
389Checks for the target subpackgae and, if it is not present, initiates a download using the specified module name. Once the subpackage is downloaded, the API pops the top page from the current navigation stack and pushes the [NavDestination](ts-basic-components-navdestination.md) page, as indicated by **name**, onto the stack. This API uses a promise to return the result.
390
391**Atomic service API**: This API can be used in atomic services since API version 12.
392
393**System capability**: SystemCapability.ArkUI.ArkUI.Full
394
395**Parameters**
396
397| Name   | Type     | Mandatory  | Description                  |
398| ----- | ------- | ---- | --------------------- |
399| moduleName | string | Yes   | Module name of the package where the [NavDestination](ts-basic-components-navdestination.md) page is located.|
400| name  | string  | Yes   | Name of the [NavDestination](ts-basic-components-navdestination.md) page.  |
401| param | Object | Yes   | Settings of the [NavDestination](ts-basic-components-navdestination.md) page.|
402| animated | boolean | No   | Whether to support transition animation.<br>Default value: **true**|
403
404**Return value**
405
406| Type               | Description       |
407| ------------------- | --------- |
408| Promise\<void\> | Promise used to return the result.|
409
410**Error codes**
411
412For details about the error codes, see [Router Error Codes](../errorcode-router.md).
413
414| ID  | Error Message|
415| --------- | ------- |
416| 300001    | hsp silent install fail.|
417
418## Events
419
420The [universal events](ts-universal-events-click.md) are not supported.
421
422## Example
423
424Main package:
425```ts
426// Index.ets
427import { NavPushPathHelper } from '@kit.ArkUI'
428import { BusinessError } from '@kit.BasicServicesKit';
429@Entry
430@Component
431struct NavigationExample {
432  pageInfo: NavPathStack = new NavPathStack()
433  helper: NavPushPathHelper = new NavPushPathHelper(this.pageInfo)
434
435  build() {
436    Navigation(this.pageInfo) {
437      Column() {
438        Button('StartTest', { stateEffect: true, type: ButtonType.Capsule })
439          .width('80%')
440          .height(40)
441          .margin(20)
442          .onClick(() => {
443            this.helper.pushPath('hsptest1', { name: 'pageOne' }, false)
444              .catch((error: BusinessError) => {
445              console.error(`[pushPath]failed, error code = ${error.code}, error.message = ${error.message}.`);
446            }).then(() => {
447              console.error('[pushPath]success.');
448            }); // Push the NavDestination page specified by name to the navigation stack.
449          })
450      }
451    }.title('NavIndex')
452  }
453}
454```
455Subpackage **hsptest1**:
456```ts
457// PageOne.ets
458import { NavPushPathHelper } from '@kit.ArkUI'
459import { BusinessError } from '@kit.BasicServicesKit';
460
461class TmpClass {
462  count: number = 10
463}
464
465class ParamWithOp {
466  operation: number = 1
467  count: number = 10
468}
469
470@Builder
471export function PageOneBuilder(name: string, param: Object) {
472  PageOne()
473}
474
475@Component
476export struct PageOne {
477  pageInfo: NavPathStack = new NavPathStack();
478  helper: NavPushPathHelper = new NavPushPathHelper(this.pageInfo)
479  @State message: string = 'Hello World'
480
481  build() {
482    NavDestination() {
483      Column() {
484        Text(this.message)
485          .width('80%')
486          .height(50)
487          .margin(10)
488
489        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
490          .width('80%')
491          .height(35)
492          .margin(10)
493          .onClick(() => {
494            this.helper.pushPath('hsptest2', { name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo) => {
495              this.message = '[pushPath]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result);
496            }}).catch((error: BusinessError) => {
497              console.error(`[pushPath]failed, error code = ${error.code}, error.message = ${error.message}.`);
498            }).then(() => {
499              console.log('[pushPath]success.');
500            });
501          })
502
503        Button('pushPath with NavigationOptions', { stateEffect: true, type: ButtonType.Capsule })
504          .width('80%')
505          .height(35)
506          .margin(10)
507          .onClick(() => {
508            this.helper.pushPath('hsptest2', { name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo) => {
509              this.message = '[pushPath with NavigationOptions]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result);
510            }}, {launchMode:0, animated:true}).catch((error: BusinessError) => {
511              console.error(`[pushPath with NavigationOptions]failed, error code = ${error.code}, error.message = ${error.message}.`);
512            }).then(() => {
513              console.log('[pushPath with NavigationOptions]success.');
514            });
515          })
516
517        Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule })
518          .width('80%')
519          .height(35)
520          .margin(10)
521          .onClick(() => {
522            let tmp = new TmpClass()
523            this.helper.pushPathByName('hsptest2', 'pageTwo', tmp, (popInfo) => {
524              this.message = '[pushPathByName]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result);
525            }).catch((error: BusinessError) => {
526              console.error(`[pushPathByName]failed, error code = ${error.code}, error.message = ${error.message}.`);
527            }).then(() => {
528              console.log('[pushPathByName]success.');
529            });
530          })
531
532        Button('pushPathByNameWithoutOnPop', { stateEffect: true, type: ButtonType.Capsule })
533          .width('80%')
534          .height(35)
535          .margin(10)
536          .onClick(() => {
537            let tmp = new TmpClass()
538            this.helper.pushPathByName('hsptest2', 'pageTwo', tmp, true)
539            .catch((error: BusinessError) => {
540              console.error(`[pushPathByNameWithoutOnPop]failed, error code = ${error.code}, error.message = ${error.message}.`);
541            }).then(() => {
542              console.log('[pushPathByNameWithoutOnPop]success.');
543            });
544          })
545
546        Button('pushDestination', { stateEffect: true, type: ButtonType.Capsule })
547          .width('80%')
548          .height(35)
549          .margin(10)
550          .onClick(() => {
551            let tmp = new TmpClass()
552            this.helper.pushDestination('hsptest2', { name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo) => {
553              this.message = '[pushDestination]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result);
554            }}).catch((error: BusinessError) => {
555              console.error(`[pushDestination]failed, error code = ${error.code}, error.message = ${error.message}.`);
556            }).then(() => {
557              console.error('[pushDestination]success.');
558            });
559          })
560
561        Button('pushDestination with NavigationOptions', { stateEffect: true, type: ButtonType.Capsule })
562          .width('80%')
563          .height(35)
564          .margin(10)
565          .onClick(() => {
566            let tmp = new TmpClass()
567            this.helper.pushDestination('hsptest2', { name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo) => {
568              this.message = '[pushDestination with NavigationOptions]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result);
569            }}, {launchMode:0, animated:true}).catch((error: BusinessError) => {
570              console.error(`[pushDestination with NavigationOptions]failed, error code = ${error.code}, error.message = ${error.message}.`);
571            }).then(() => {
572              console.error('[pushDestination with NavigationOptions]success.');
573            });
574          })
575
576        Button('pushDestinationByName', { stateEffect: true, type: ButtonType.Capsule })
577          .width('80%')
578          .height(35)
579          .margin(10)
580          .onClick(() => {
581            let tmp = new TmpClass()
582            this.helper.pushDestinationByName('hsptest2','pageTwo', tmp, (popInfo) => {
583              this.message = '[pushDestinationByName]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result);
584            }).catch((error: BusinessError) => {
585              console.error(`[pushDestinationByName]failed, error code = ${error.code}, error.message = ${error.message}.`);
586            }).then(() => {
587              console.error('[pushDestinationByName]success.');
588            });
589          })
590
591        Button('pushDestinationByNameWithoutOnPop', { stateEffect: true, type: ButtonType.Capsule })
592          .width('80%')
593          .height(35)
594          .margin(10)
595          .onClick(() => {
596            let tmp = new TmpClass()
597            this.helper.pushDestinationByName('hsptest2','pageTwo', tmp, true)
598              .catch((error: BusinessError) => {
599                console.error(`[pushDestinationByNameWithoutOnPop]failed, error code = ${error.code}, error.message = ${error.message}.`);
600              }).then(() => {
601              console.error('[pushDestinationByNameWithoutOnPop]success.');
602            });
603          })
604
605        Button('replacePath', { stateEffect: true, type: ButtonType.Capsule })
606          .width('80%')
607          .height(35)
608          .margin(10)
609          .onClick(() => {
610            this.helper.replacePath('hsptest2', { name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo) => {
611              this.message = '[replacePath]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result);
612            }}).catch((error: BusinessError) => {
613              console.error(`[replacePath]failed, error code = ${error.code}, error.message = ${error.message}.`);
614            }).then(() => {
615              console.log('[replacePath]success.');
616            });
617          })
618
619        Button('replacePath with NavigationOptions', { stateEffect: true, type: ButtonType.Capsule })
620          .width('80%')
621          .height(35)
622          .margin(10)
623          .onClick(() => {
624            this.helper.replacePath('hsptest2', { name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo) => {
625              this.message = '[replacePath with NavigationOptions]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result);
626            }}, {launchMode:0, animated:true}).catch((error: BusinessError) => {
627              console.error(`[replacePath with NavigationOptions]failed, error code = ${error.code}, error.message = ${error.message}.`);
628            }).then(() => {
629              console.log('[replacePath with NavigationOptions]success.');
630            });
631          })
632
633        Button('replacePathByName', { stateEffect: true, type: ButtonType.Capsule })
634          .width('80%')
635          .height(35)
636          .margin(10)
637          .onClick(() => {
638            let tmp = new TmpClass()
639            this.helper.replacePathByName('hsptest2', 'pageTwo', tmp)
640              .catch((error: BusinessError) => {
641              console.error(`[replacePathByName]failed, error code = ${error.code}, error.message = ${error.message}.`);
642            }).then(() => {
643              console.log('[replacePathByName]success.');
644            });
645          })
646
647      }.width('100%').height('100%')
648    }.title('pageOne')
649    .onBackPressed(() => {
650      this.pageInfo.pop({ number: 1 }) // Pop the top element out of the navigation stack.
651      return true
652    }).onReady((context: NavDestinationContext) => {
653      this.pageInfo = context.pathStack;
654      this.helper = new NavPushPathHelper(this.pageInfo);
655    })
656  }
657}
658```
659
660```json
661// Configure {"routerMap": "$profile:route_map"} in the project configuration file module.json5.
662// route_map.json
663{
664  "routerMap": [
665    {
666      "name": "pageOne",
667      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
668      "buildFunction": "PageOneBuilder",
669      "data": {
670        "description": "this is pageOne"
671      }
672    }
673  ]
674}
675```
676
677Subpackage **hsptest2**:
678```ts
679// PageTwo.ets
680
681class resultClass {
682  constructor(count: number) {
683    this.count = count;
684  }
685  count: number = 10
686}
687
688@Builder
689export function PageTwoBuilder() {
690  PageTwo()
691}
692
693@Component
694export struct PageTwo {
695  pathStack: NavPathStack = new NavPathStack()
696
697  build() {
698    NavDestination() {
699      Column() {
700        Button('pop', { stateEffect: true, type: ButtonType.Capsule })
701          .width('80%')
702          .height(40)
703          .margin(20)
704          .onClick(() => {
705            this.pathStack.pop(new resultClass(1)); // Return to the previous page and pass in the processing result to the onPop callback of push.
706          })
707      }.width('100%').height('100%')
708    }.title('pageTwo')
709    .onBackPressed(() => {
710      this.pathStack.pop(new resultClass(0)); // Return to the previous page and pass in the processing result to the onPop callback of push.
711      return true;
712    }).onReady((context: NavDestinationContext) => {
713      this.pathStack = context.pathStack
714    })
715  }
716}
717```
718
719```json
720// Configure {"routerMap": "$profile:route_map"} in the project configuration file module.json5.
721// route_map.json
722{
723  "routerMap": [
724    {
725      "name": "pageTwo",
726      "pageSourceFile": "src/main/ets/pages/PageTwo.ets",
727      "buildFunction": "PageTwoBuilder",
728      "data": {
729        "description": "this is pageTwo"
730      }
731    }
732  ]
733}
734```
735![NavPushPathHelperDemo.gif](figures/NavPushPathHelperDemo.gif)
736