1# MultiNavigation
2
3**MultiNavigation** is a component designed for multi-column display and routing navigation on large-screen devices.
4
5> **NOTE**
6>
7> This component is supported since API version 14. Updates will be marked with a superscript to indicate their earliest API version.
8>
9> Due to the nested stack structure of **MultiNavigation**, calling APIs explicitly stated as unsupported in this document or APIs not listed in the supported API list (such as **getParent**, **setInterception**, and **pushDestination**) may lead to unpredictable issues.
10
11## Modules to Import
12
13```
14import { MultiNavigation, MultiNavPathStack, SplitPolicy } from '@kit.ArkUI';
15```
16
17## Child Components
18
19Not supported
20
21## MultiNavigation
22
23MultiNavigation(navDestination: navDestination, multiStack: MultiNavPathStack, onNavigationModeChange?: OnNavigationModeChangeCallback, onHomeShowOnTop?: OnHomeShowOnTopCallback)
24
25Creates and initializes a **MultiNavigation** component.
26
27The **MultiNavigation** component follows the default left-to-right stack clearing rule. This means that a click from the home page on the left triggers the loading of the detail page and simultaneously clears all other detail pages on the right, ensuring that only the most recently loaded detail page is displayed on the right. However, if a detail page loading operation is performed again on the right detail page, the system will not perform the stack clearing action.
28
29**Decorator**: @Component
30
31**Atomic service API**: This API can be used in atomic services since API version 14.
32
33**System capability**: SystemCapability.ArkUI.ArkUI.Full
34
35**Parameters**
36
37|   Name  |          Type         | Mandatory | Decorator| Description|
38|:---------:|:----------------------:|-----| ------ |-----------|
39| multiStack | [MultiNavPathStack](#multinavpathstack) | Yes  | @State | Navigation stack.|
40| navDestination | [NavDestinationBuildFunction](#navdestinationbuildfunction) | Yes| @BuilderParam | Routing rules for loading the target page.|
41| onNavigationModeChange | [OnNavigationModeChangeCallback](#onnavigationmodechangecallback) | No| - | Callback invoked when the mode of the **MultiNavigation** component changes.|
42| onHomeShowOnTop | [OnHomeShowOnTopCallback](#onhomeshowontopcallback) | No| - | Callback invoked when the home page is on the top of the navigation stack.|
43
44## MultiNavPathStack
45
46Implements a navigation stack of the **MultiNavigation** component. Currently, this stack can be created only by the user and cannot be obtained through callbacks. Do not use events or APIs such as **onReady** of **NavDestination** to obtain the navigation stack and perform stack operations, as this may lead to unpredictable issues.
47
48**Atomic service API**: This API can be used in atomic services since API version 14.
49
50**System capability**: SystemCapability.ArkUI.ArkUI.Full
51
52### pushPath
53
54pushPath(info: NavPathInfo, animated?: boolean, policy?: SplitPolicy): void
55
56Pushes the specified navigation destination page to the navigation stack.
57
58**Parameters**
59
60|   Name  |                             Type                            | Mandatory| Description                                     |
61| :------: | :----------------------------------------------------------: | :--: | ----------------------------------------- |
62|   info   | [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) |  Yes | Information about the navigation destination page.               |
63| animated |                           boolean                            |  No | Whether to support transition animations.<br>Default value: **true**         |
64|  policy  |               [SplitPolicy](#splitpolicy)                |  No | Policy for the current page being pushed.<br>Default value: **DETAIL_PAGE**|
65
66### pushPath
67
68pushPath(info: NavPathInfo, options?: NavigationOptions, policy?: SplitPolicy): void
69
70Pushes the specified navigation destination page to the navigation stack, with stack operation settings through **NavigationOptions**.
71
72**Parameters**
73
74|  Name  |                             Type                            | Mandatory| Description                                      |
75| :-----: | :----------------------------------------------------------: | :--: | ------------------------------------------ |
76|  info   | [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) |  Yes | Information about the navigation destination page.                |
77| options | [NavigationOptions](./ts-basic-components-navigation.md#navigationoptions12) |  No | Stack operation settings. Only the **animated** field is supported.|
78| policy  |               [SplitPolicy](#splitpolicy)                |  No | Policy for the current page being pushed.<br>Default value: **DETAIL_PAGE**   |
79
80### pushPathByName
81
82pushPathByName(name: string, param: Object, animated?: boolean, policy?: SplitPolicy): void
83
84Pushes the navigation destination page specified by **name** to the navigation stack, passing the data specified by **param**.
85
86**Parameters**
87
88|          Name          |      Type     |   Mandatory  | Description                   |
89|:---------------------:|:------------:|:------:| --------------------- |
90|         name          |    string    |   Yes   | Name of the navigation destination page.  |
91|         param         |   Object    |   Yes   | Detailed parameters of the navigation destination page.|
92|       animated        |   boolean    |   No   | Whether to support transition animations.<br>Default value: **true**|
93|        policy         | [SplitPolicy](#splitpolicy)  |   No   | Policy for the current page being pushed.<br>Default value: **DETAIL_PAGE**      |
94
95### pushPathByName
96
97pushPathByName(name: string, param: Object, onPop: Callback\<PopInfo>, animated?: boolean, policy?: SplitPolicy): void
98
99Pushes the navigation destination page specified by **name** to the navigation stack, passing the data specified by **param**. This API uses the **onPop** callback to handle the result returned when the page is popped out of the stack.
100
101**Parameters**
102
103|    Name    |                              Type                              |   Mandatory  | Description|
104|:---------:|:-------------------------------------------------------------:|:------:|------|
105|   name    |                            string                             |   Yes   | Name of the navigation destination page.  |
106|   param   |                            Object                             |   Yes   | Detailed parameters of the navigation destination page.|
107|   onPop   | Callback\<[PopInfo](ts-basic-components-navigation.md#popinfo11)>  |   Yes   | Callback used to handle the return result.|
108| animated  |                            boolean                            |   No   | Whether to support transition animations.<br>Default value: **true**|
109|  policy   |                          [SplitPolicy](#splitpolicy)                          |   No   | Policy for the current page being pushed.<br>Default value: **DETAIL_PAGE**      |
110
111### replacePath
112
113replacePath(info: NavPathInfo, animated?: boolean): void
114
115Replaces the current top page on the stack with the specified navigation destination page. The new page inherits the split policy of the original top page.
116
117**Parameters**
118
119|   Name  |                             Type                            | Mandatory| Description                            |
120| :------: | :----------------------------------------------------------: | :--: | -------------------------------- |
121|   info   | [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) |  Yes | Information about the navigation destination page.      |
122| animated |                           boolean                            |  No | Whether to support transition animations.<br>Default value: **true**|
123
124### replacePath
125
126replacePath(info: NavPathInfo, options?: NavigationOptions): void
127
128Replaces the current top page on the stack with the specified navigation destination page, with stack operation settings through **NavigationOptions**. The new page inherits the split policy of the original top page.
129
130**Parameters**
131
132|  Name  |                             Type                            | Mandatory| Description                                      |
133| :-----: | :----------------------------------------------------------: | :--: | ------------------------------------------ |
134|  info   | [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) |  Yes | Information about the navigation destination page.                |
135| options | [NavigationOptions](./ts-basic-components-navigation.md#navigationoptions12) |  No | Navigation options. Only the **animated** field is supported.|
136
137### replacePathByName
138
139replacePathByName(name: string, param: Object, animated?: boolean): void
140
141Replaces the current top page on the stack with the navigation destination page specified by **name**. The new page inherits the split policy of the original top page.
142
143**Parameters**
144
145|    Name   |    Type    |   Mandatory  | Description                  |
146|:--------:|:---------:|:------:|----------------------|
147|   name   |  string   |   Yes   | Name of the navigation destination page. |
148|  param   |  Object   |   Yes   | Detailed parameters of the navigation destination page.|
149| animated |  boolean  |   No   | Whether to support transition animations.<br>Default value: **true**  |
150
151### removeByIndexes
152
153removeByIndexes(indexes: Array<number\>): number
154
155Removes the navigation destination pages specified by **indexes** from the navigation stack.
156
157**Parameters**
158
159|    Name   |       Type       |   Mandatory  | Description                   |
160|:--------:|:---------------:|:------:| --------------------- |
161| indexes  | Array<number\>  |   Yes   | Array of indexes of the navigation destination pages to remove.  |
162
163**Return value**
164
165|      Type      | Description                      |
166|:-------------:| ------------------------ |
167|    number     | Number of the navigation destination pages removed.|
168
169### removeByName
170
171removeByName(name: string): number
172
173Removes the navigation destination page specified by **name** from the navigation stack.
174
175**Parameters**
176
177|   Name   | Type     | Mandatory  | Description                   |
178|:-------:| ------- | ---- | --------------------- |
179|  name   | string  | Yes   | Name of the navigation destination page to be removed.|
180
181**Return value**
182
183|      Type      | Description                      |
184|:-------------:| ------------------------ |
185|    number     | Number of the navigation destination pages removed.|
186
187### pop
188
189pop(animated?: boolean): NavPathInfo | undefined
190
191Pops the top element out of the navigation stack.
192
193> **NOTE**
194>
195> If [keepBottomPage](#keepbottompage) is called with **true**, the bottom page of the navigation stack is retained.
196
197**Parameters**
198
199|     Name     |    Type   |   Mandatory  | Description                  |
200|:-----------:|:--------:|:------:| -------------------- |
201|  animated   | boolean  |   No   | Whether to support transition animations.<br>Default value: **true**|
202
203**Return value**
204
205| Type         | Description                      |
206| ----------- | ------------------------ |
207| [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) \| undefined | Information about the navigation destination page at the top of the stack.|
208
209### pop
210
211pop(result: Object, animated?: boolean): NavPathInfo | undefined
212
213Pops the top element out of the navigation stack and invokes the **onPop** callback to pass the page processing result.
214
215> **NOTE**
216>
217> If [keepBottomPage](#keepbottompage) is called with **true**, the bottom page of the navigation stack is retained.
218
219**Parameters**
220
221|    Name    |               Type               |   Mandatory  | Description                  |
222|:---------:|:-------------------------------:|:------:| -------------------- |
223|  result   |             Object              |   Yes   | Custom processing result on the page.|
224| animated  |             boolean             |   No   | Whether to support transition animations.<br>Default value: **true**|
225
226**Return value**
227
228| Type         | Description                      |
229| ----------- | ------------------------ |
230| [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) \| undefined | Information about the navigation destination page at the top of the stack.|
231
232### popToName
233
234popToName(name: string, animated?: boolean): number
235
236Pops pages until the first navigation destination page that matches **name** from the bottom of the navigation stack is at the top of the stack.
237
238**Parameters**
239
240|     Name    |    Type   |   Mandatory  | Description                 |
241|:----------:|:--------:|:------:| ------------------- |
242|    name    |  string  |   Yes   | Name of the navigation destination page.|
243|  animated  | boolean  |   No   | Whether to support transition animations.<br>Default value: **true**|
244
245**Return value**
246
247| Type    | Description                                      |
248| ------ | ---------------------------------------- |
249| number | Returns the index of the first navigation destination page that matches **name** from the bottom of the navigation stack; returns **-1** if no such a page is found.|
250
251### popToName
252
253popToName(name: string, result: Object, animated?: boolean): number
254
255Pops pages until the first navigation destination page that matches **name** from the bottom of the navigation stack is at the top of the stack. This API uses the **onPop** callback to pass in the page processing result.
256
257**Parameters**
258
259|    Name    |    Type   |   Mandatory  | Description                 |
260|:---------:|:--------:|:------:| ------------------- |
261|   name    |  string  |   Yes   | Name of the navigation destination page.|
262|  result   |  Object  |   Yes   | Custom processing result on the page.|
263| animated  | boolean  |   No   | Whether to support transition animations.<br>Default value: **true**|
264
265**Return value**
266
267| Type    | Description                                      |
268| ------ | ---------------------------------------- |
269| number | Returns the index of the first navigation destination page that matches **name** from the bottom of the navigation stack; returns **-1** if no such a page is found.|
270
271### popToIndex
272
273popToIndex(index: number, animated?: boolean): void
274
275Returns the navigation stack to the page specified by **index**.
276
277**Parameters**
278
279|      Name     |    Type   |   Mandatory  | Description                    |
280|:------------:|:--------:|:------:| ---------------------- |
281|    index     |  number  |   Yes   | Index of the navigation destination page.|
282|   animated   | boolean  |   No   | Whether to support transition animations.<br>Default value: **true**|
283
284### popToIndex
285
286popToIndex(index: number, result: Object, animated?: boolean): void
287
288Returns the navigation stack to the page specified by **index** and invokes the **onPop** callback to pass the page processing result.
289
290**Parameters**
291
292| Name   | Type    | Mandatory  | Description                    |
293| ----- | ------ | ---- | ---------------------- |
294| index | number | Yes   | Index of the navigation destination page.|
295| result | Object | Yes| Custom processing result on the page.|
296| animated | boolean | No   | Whether to support transition animations.<br>Default value: **true**|
297
298### moveToTop
299
300moveToTop(name: string, animated?: boolean): number
301
302Moves the first navigation destination page that matches **name** from the bottom of the navigation stack to the top of the stack.
303
304> **NOTE**
305>
306> Depending on the type of page found, **MultiNavigation** performs different actions:
307>
308> 1. If the found page is the topmost home page or a full-screen page, no action is taken.
309>
310> 2. If the found page is a detail page corresponding to the topmost home page, it is moved to the top.
311>
312> 3. If the found page is a non-topmost home page, the home page and all corresponding detail pages are moved to the top, maintaining their relative stack order.
313>
314> 4. If the found page is a non-topmost detail page, the home page and all corresponding detail pages are moved to the top, and the target detail page is moved to the top of the corresponding detail pages.
315>
316> 5. If the found page is a non-topmost full-screen page, it is moved to the top.
317
318|    Name    |    Type   |   Mandatory  | Description                 |
319|:---------:|:--------:|:------:| ------------------- |
320|   name    |  string  |   Yes   | Name of the navigation destination page.|
321| animated  | boolean  |   No   | Whether to support transition animations.<br>Default value: **true**|
322
323**Return value**
324
325|    Type   |                                      Description                                     |
326|:--------:|:----------------------------------------------------------------------------:|
327|  number  | Returns the index of the first navigation destination page that matches **name** from the bottom of the navigation stack; returns **-1** if no such a page is found. |
328
329### moveIndexToTop
330
331moveIndexToTop(index: number, animated?: boolean): void
332
333Moves the navigation destination page specified by **index** to the top of the navigation stack.
334
335> **NOTE**
336>
337> Depending on the type of page found, **MultiNavigation** performs different actions:
338>
339> 1. If the found page is the topmost home page or a full-screen page, no action is taken.
340>
341> 2. If the found page is a detail page corresponding to the topmost home page, it is moved to the top.
342>
343> 3. If the found page is a non-topmost home page, the home page and all corresponding detail pages are moved to the top, maintaining their relative stack order.
344>
345> 4. If the found page is a non-topmost detail page, the home page and all corresponding detail pages are moved to the top, and the target detail page is moved to the top of the corresponding detail pages.
346>
347> 5. If the found page is a non-topmost full-screen page, it is moved to the top.
348
349|    Name    |   Type   |   Mandatory  | Description                 |
350|:---------:|:-------:|:------:| ------------------- |
351|   index    | number  |   Yes   | Index of the navigation destination page.|
352| animated  | boolean |   No   | Whether to support transition animations.<br>Default value: **true**|
353
354### clear
355
356clear(animated?: boolean): void
357
358Clears the navigation stack.
359
360> **NOTE**
361>
362> If [keepBottomPage](#keepbottompage) is called with **true**, the bottom page of the navigation stack is retained.
363
364**Parameters**
365
366|    Name    |    Type   |   Mandatory  | Description                    |
367|:---------:|:--------:|:------:| ---------------------- |
368| animated  | boolean  |   No   | Whether to support transition animations.<br>Default value: **true**|
369
370### getAllPathName
371
372getAllPathName(): Array<string\>
373
374Obtains the names of all navigation destination pages in the navigation stack.
375
376**Return value**
377
378|        Type       | Description                        |
379|:----------------:| -------------------------- |
380|  Array<string\>  | Names of all navigation destination pages in the navigation stack.|
381
382### getParamByIndex
383
384getParamByIndex(index: number): Object | undefined
385
386Obtains the parameter information of the navigation destination page specified by **index**.
387
388**Parameters**
389
390|   Name   |    Type   |   Mandatory  | Description                    |
391|:-------:|:--------:|:------:| ---------------------- |
392|  index  |  number  |   Yes   | Index of the navigation destination page.|
393
394**Return value**
395
396| Type       | Description                        |
397| --------- | -------------------------- |
398| Object   | Parameter information of the matching navigation destination page.|
399| undefined   | Returned if the provided index is invalid.|
400
401### getParamByName
402
403getParamByName(name: string): Array<Object\>
404
405Obtains the parameter information of all the navigation destination pages that match **name**.
406
407**Parameters**
408
409|   Name  |    Type   |   Mandatory  | Description                 |
410|:------:|:--------:|:------:| ------------------- |
411|  name  |  string  |   Yes   | Name of the navigation destination page.|
412
413**Return value**
414
415| Type             | Description                               |
416| --------------- | --------------------------------- |
417| Array<Object\> | Parameter information of all the matching navigation destination pages.|
418
419### getIndexByName
420
421getIndexByName(name: string): Array<number\>
422
423Obtains the indexes of all the navigation destination pages that match **name**.
424
425**Parameters**
426
427|   Name  |    Type   |   Mandatory  | Description                 |
428|:------:|:--------:|:------:| ------------------- |
429|  name  |  string  |   Yes   | Name of the navigation destination page.|
430
431**Return value**
432
433| Type            | Description                               |
434| -------------- | --------------------------------- |
435| Array<number\> | Indexes of all the matching navigation destination pages.|
436
437### size
438
439size(): number
440
441Obtains the stack size.
442
443**Return value**
444
445| Type    | Description    |
446| ------ | ------ |
447| number | Stack size.|
448
449### disableAnimation
450
451disableAnimation(value: boolean): void
452
453Disables or enables the transition animation in the **MultiNavigation** component.
454
455**Parameters**
456
457| Name   | Type    | Mandatory  | Description                    |
458| ----- | ------ | ---- | ---------------------- |
459| value | boolean | No   | Whether to disable the transition animation.<br>Default value: **false**|
460
461### switchFullScreenState
462
463switchFullScreenState(isFullScreen?: boolean): boolean
464
465Switches the display mode of the current top detail page in the stack. The value **true** means to enable full-screen mode, and **false** means to enable split-screen mode.
466
467**Parameters**
468
469|     Name    |  Type  | Mandatory| Description                                                 |
470| :----------: | :-----: | :--: | ----------------------------------------------------- |
471| isFullScreen | boolean |  Yes | Whether to enable full-screen mode. The value **true** means to enable full-screen mode, and **false** means to enable split-screen mode.|
472
473**Return value**
474
475|    Type   |     Description    |
476|:--------:|:----------:|
477| boolean  |  Whether the switching is successful. |
478
479### setHomeWidthRange
480
481setHomeWidthRange(minPercent: number, maxPercent: number): void
482
483Sets the draggable range for the home page width. If not set, the width defaults to 50% and is not draggable.
484
485**Parameters**
486
487|      Name      |    Type   |  Mandatory  | Description               |
488|:-------------:|:--------:|:-----:|-------------------|
489| minPercent  | number  |   Yes  | Minimum width percentage of the home page.|
490| maxPercent  | number  |   Yes  | Maximum width percentage of the home page.|
491
492### keepBottomPage
493
494keepBottomPage(keepBottom: boolean): void
495
496Sets whether to retain the bottom page when the **pop** or **clear** APIs is called.
497
498> **NOTE**
499>
500> **MultiNavigation** treats the home page as a navigation destination page in the stack. By default, calling **pop** or **clea**r will also remove the bottom page.
501> If this API is called with **TRUE**, **MultiNavigation** will retain the bottom page when the **pop** or **clear** API is called.
502
503**Parameters**
504
505|      Name      |    Type   |  Mandatory  | Description                |
506|:-------------:|:--------:|:-----:|--------------------|
507| keepBottom  | boolean  |   Yes  | Whether to retain the bottom page.<br>Default value: **FALSE**|
508
509### setPlaceholderPage
510
511setPlaceholderPage(info: NavPathInfo): void
512
513Sets a placeholder page.
514
515> **NOTE**
516>
517> The placeholder page is a special page type. When set, it forms a default split-screen effect with the home page on some large-screen devices, that is, the left side is the home page, and the right side is the placeholder page.
518>
519> In scenarios where the application's drawable area is less than 600 vp, or when a foldable screen switches from the expanded state to the folded state, or when a tablet switches from landscape to portrait mode, the placeholder page will be automatically removed, resulting in only the home page being shown.
520> Conversely, when the application's drawable area is greater than or equal to 600 vp, or when a foldable screen switches from the folded state to the expanded state, or when a tablet switches from portrait to landscape mode, the placeholder page will be automatically added to form a split-screen.
521
522**Parameters**
523
524|      Name      |    Type   |  Mandatory  | Description      |
525|:-------------:|:--------:|:-----:|----------|
526| info  | NavPathInfo  |   Yes  | Information about the placeholder page.|
527
528## SplitPolicy
529
530Enumerates the types of pages in **MultiNavigation**.
531
532**Atomic service API**: This API can be used in atomic services since API version 14.
533
534**System capability**: SystemCapability.ArkUI.ArkUI.Full
535
536|       Name       |  Value|  Description          |
537| :---------------: | :-: | :-------------: |
538|     HOME_PAGE     |  0  | Home page. Displayed in full-screen mode. |
539|    DETAIL_PAGE    |  1  | Detail page. Displayed in split-screen mode.|
540|     FULL_PAGE     |  2  | Full-screen page. Displayed in full-screen mode.|
541
542## NavDestinationBuildFunction
543
544type NavDestinationBuildFunction = (name: string, param?: object) => void
545
546Represents the function used by the **MultiNavigation** component to load navigation destination pages.
547
548**Atomic service API**: This API can be used in atomic services since API version 14.
549
550**System capability**: SystemCapability.ArkUI.ArkUI.Full
551
552| Name| Type| Mandatory| Description|
553| --------------- | ------ |------ |------ |
554|name | string |Yes| ID of the navigation destination page.|
555| param | object | No| Parameters passed when the page is created during navigation.|
556
557## OnNavigationModeChangeCallback
558
559type OnNavigationModeChangeCallback = (mode: NavigationMode) => void
560
561Represents the callback invoked when the mode of the **MultiNavigation** component changes.
562
563**Atomic service API**: This API can be used in atomic services since API version 14.
564
565**System capability**: SystemCapability.ArkUI.ArkUI.Full
566
567| Name| Type                                                        | Mandatory| Description                          |
568| ---- | ------------------------------------------------------------ | ---- | ------------------------------ |
569| mode | [NavigationMode](./ts-basic-components-navigation.md#navigationmode9) | Yes  | Navigation mode when the callback is invoked.|
570
571## OnHomeShowOnTopCallback
572
573type OnHomeShowOnTopCallback = (name: string) => void
574
575Represents the callback invoked when the home page is displayed at the top of the stack.
576
577**Atomic service API**: This API can be used in atomic services since API version 14.
578
579**System capability**: SystemCapability.ArkUI.ArkUI.Full
580
581| Name| Type  | Mandatory| Description                      |
582| ---- | ------ | ---- | -------------------------- |
583| name | string | Yes  | ID of the page displayed at the top of the stack.|
584
585## Attributes
586
587The [universal attributes](ts-universal-attributes-size.md) are not supported.
588
589## Events
590
591The [universal events](ts-universal-events-click.md) are not supported.
592
593## Example
594
595This example demonstrates the basic usage of **MultiNavigation**.
596
597```typescript
598// pages/Index.ets
599import { MultiNavigation, MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation';
600import { PageDetail1 } from './PageDetail1';
601import { PageDetail2 } from './PageDetail2';
602import { PageFull1 } from './PageFull1';
603import { PageHome1 } from './PageHome1';
604import { PagePlaceholder } from './PagePlaceholder';
605
606@Entry
607@Component
608struct Index {
609  @Provide('pageStack') pageStack: MultiNavPathStack = new MultiNavPathStack();
610
611  @Builder
612  PageMap(name: string, param?: object) {
613    if (name === 'PageHome1') {
614      PageHome1({ param: param })
615    } else if (name === 'PageDetail1') {
616      PageDetail1({ param: param });
617    } else if (name === 'PageDetail2') {
618      PageDetail2({ param: param });
619    } else if (name === 'PageFull1') {
620      PageFull1();
621    } else if (name === 'PagePlaceholder') {
622      PagePlaceholder();
623    }
624  }
625
626  aboutToAppear(): void {
627    this.pageStack.pushPathByName('PageHome1', 'paramTest', false, SplitPolicy.HOME_PAGE);
628  }
629
630  build() {
631    Column() {
632      Row() {
633        MultiNavigation({ navDestination: this.PageMap, multiStack: this.pageStack })
634      }
635      .width('100%')
636    }
637  }
638}
639```
640
641```typescript
642// pages/PageHome1.ets, corresponding to the home page
643import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation';
644import { hilog } from '@kit.PerformanceAnalysisKit';
645
646@Component
647export struct PageHome1 {
648  @State message: string = 'PageHome1';
649  @Consume('pageStack') pageStack: MultiNavPathStack;
650  controller: TextInputController = new TextInputController()
651  text: String = '';
652  index: number = 0;
653  param: Object = new Object();
654  lastBackTime: number = 0;
655
656  build() {
657    if (this.log()) {
658      NavDestination() {
659        Column() {
660          Column() {
661            Text(this.message)
662              .fontSize(40)
663              .fontWeight(FontWeight.Bold)
664          }
665          .width('100%')
666          .height('8%')
667          Scroll(){
668            Column() {
669              Button('OpenHome', { stateEffect: true, type: ButtonType.Capsule})
670                .width('50%')
671                .height(40)
672                .margin(20)
673                .onClick(() => {
674                  if (this.pageStack !== undefined && this.pageStack !== null) {
675                    this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE);
676                    this.index++;
677                  }
678                })
679              Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule})
680                .width('50%')
681                .height(40)
682                .margin(20)
683                .onClick(() => {
684                  if (this.pageStack !== undefined && this.pageStack !== null) {
685                    this.pageStack.pushPathByName('PageDetail1', 'testParam');
686                    this.index++;
687                  }
688                })
689              Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule})
690                .width('50%')
691                .height(40)
692                .margin(20)
693                .onClick(() => {
694                  if (this.pageStack !== undefined && this.pageStack !== null) {
695                    this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE);
696                  }
697                })
698              TextInput({placeholder: 'input your poptoindex ...', controller: this.controller })
699                .placeholderColor(Color.Grey)
700                .placeholderFont({ size: 14, weight: 400 })
701                .caretColor(Color.Blue)
702                .width('50%')
703                .height(40)
704                .margin(20)
705                .type(InputType.Number)
706                .fontSize(14)
707                .fontColor(Color.Black)
708                .onChange((value: String) => {
709                  this.text = value
710                })
711              Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule})
712                .width('50%')
713                .height(40)
714                .margin(20)
715                .onClick(() => {
716                  if (this.pageStack !== undefined && this.pageStack !== null) {
717                    this.pageStack.popToIndex(Number(this.text));
718                    this.controller.caretPosition(1)
719                  }
720                })
721              Button('OpenDetailWithName', { stateEffect: true, type: ButtonType.Capsule})
722                .width('50%')
723                .height(40)
724                .margin(20)
725                .onClick(() => {
726                  if (this.pageStack !== undefined && this.pageStack !== null) {
727                    this.pageStack.pushPathByName('PageDetail1', 'testParam', undefined, true);
728                  }
729                })
730              Button('pop', { stateEffect: true, type: ButtonType.Capsule})
731                .width('50%')
732                .height(40)
733                .margin(20)
734                .onClick(() => {
735                  if (this.pageStack !== undefined && this.pageStack !== null) {
736                    this.pageStack.pop();
737                  }
738                })
739              Button('moveToTopByName: PageDetail1', { stateEffect: true, type: ButtonType.Capsule})
740                .width('50%')
741                .height(40)
742                .margin(10)
743                .onClick(() => {
744                  if (this.pageStack !== undefined && this.pageStack !== null) {
745                    let indexFound = this.pageStack.moveToTop('PageDetail1');
746                    hilog.info(0x0000, 'demoTest', 'moveToTopByName,indexFound:' + indexFound);
747                  }
748                })
749              Button('removeByName HOME', { stateEffect: true, type: ButtonType.Capsule})
750                .width('50%')
751                .height(40)
752                .margin(20)
753                .onClick(() => {
754                  if (this.pageStack !== undefined && this.pageStack !== null) {
755                    this.pageStack.removeByName('PageHome1');
756                  }
757                })
758              Button('removeByIndexes 0135', { stateEffect: true, type: ButtonType.Capsule})
759                .width('50%')
760                .height(40)
761                .margin(20)
762                .onClick(() => {
763                  if (this.pageStack !== undefined && this.pageStack !== null) {
764                    this.pageStack.removeByIndexes([0,1,3,5]);
765                  }
766                })
767              Button('getAllPathName', { stateEffect: true, type: ButtonType.Capsule})
768                .width('50%')
769                .height(40)
770                .margin(20)
771                .onClick(() => {
772                  if (this.pageStack !== undefined && this.pageStack !== null) {
773                    let result = this.pageStack.getAllPathName();
774                    hilog.info(0x0000, 'demotest', 'getAllPathName: ' + result.toString());
775                  }
776                })
777              Button('getParamByIndex0', { stateEffect: true, type: ButtonType.Capsule})
778                .width('50%')
779                .height(40)
780                .margin(20)
781                .onClick(() => {
782                  if (this.pageStack !== undefined && this.pageStack !== null) {
783                    let result = this.pageStack.getParamByIndex(0);
784                    hilog.info(0x0000, 'demotest', 'getParamByIndex: ' + result);
785                  }
786                })
787              Button('getParamByNameHomePage', { stateEffect: true, type: ButtonType.Capsule})
788                .width('50%')
789                .height(40)
790                .margin(20)
791                .onClick(() => {
792                  if (this.pageStack !== undefined && this.pageStack !== null) {
793                    let result = this.pageStack.getParamByName('PageHome1');
794                    hilog.info(0x0000, 'demotest', 'getParamByName: ' + result.toString());
795                  }
796                })
797              Button('getIndexByNameHomePage', { stateEffect: true, type: ButtonType.Capsule})
798                .width('50%')
799                .height(40)
800                .margin(20)
801                .onClick(() => {
802                  if (this.pageStack !== undefined && this.pageStack !== null) {
803                    let result = this.pageStack.getIndexByName('PageHome1');
804                    hilog.info(0x0000, 'demotest', 'getIndexByName: ' + result);
805                  }
806                })
807              Button('keepBottomPage True', { stateEffect: true, type: ButtonType.Capsule})
808                .width('50%')
809                .height(40)
810                .margin(10)
811                .onClick(() => {
812                  if (this.pageStack !== undefined && this.pageStack !== null) {
813                    this.pageStack.keepBottomPage(true);
814                  }
815                })
816              Button('keepBottomPage False', { stateEffect: true, type: ButtonType.Capsule})
817                .width('50%')
818                .height(40)
819                .margin(10)
820                .onClick(() => {
821                  if (this.pageStack !== undefined && this.pageStack !== null) {
822                    this.pageStack.keepBottomPage(false);
823                  }
824                })
825              Button('setPlaceholderPage', { stateEffect: true, type: ButtonType.Capsule})
826                .width('50%')
827                .height(40)
828                .margin(10)
829                .onClick(() => {
830                  if (this.pageStack !== undefined && this.pageStack !== null) {
831                    this.pageStack.setPlaceholderPage({ name: 'PagePlaceholder' });
832                  }
833                })
834            }.backgroundColor(0xFFFFFF).width('100%').padding(10).borderRadius(15)
835            }
836            .width('100%')
837          }
838          .width('100%')
839          .height('92%')
840        }.hideTitleBar(true)
841      }
842    }
843
844  log(): boolean {
845    hilog.info(0x0000, 'demotest', 'PageHome1 build called');
846    return true;
847  }
848}
849```
850
851```typescript
852// pages/PageDetail1.ets: detail page
853import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation';
854import { hilog } from '@kit.PerformanceAnalysisKit';
855
856@Component
857export struct PageDetail1 {
858  @State message: string = 'PageDetail1';
859  @Consume('pageStack') pageStack: MultiNavPathStack;
860  controller: TextInputController = new TextInputController()
861  text: String = '';
862  param: Object = new Object();
863
864  build() {
865    if (this.log()) {
866      NavDestination() {
867        Column() {
868          Column() {
869            Text(this.message)
870              .fontSize(40)
871              .fontWeight(FontWeight.Bold)
872          }
873          .height('8%')
874          .width('100%')
875          Scroll(){
876            Column(){
877              Button('OpenHome', { stateEffect: true, type: ButtonType.Capsule})
878                .width('50%')
879                .height(40)
880                .margin(20)
881                .onClick(() => {
882                  if (this.pageStack !== undefined && this.pageStack !== null) {
883                    this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE);
884                  }
885                })
886              Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule})
887                .width('50%')
888                .height(40)
889                .margin(20)
890                .onClick(() => {
891                  if (this.pageStack !== undefined && this.pageStack !== null) {
892                    this.pageStack.pushPathByName('PageDetail1', 'testParam');
893                  }
894                })
895              Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule})
896                .width('50%')
897                .height(40)
898                .margin(20)
899                .onClick(() => {
900                  if (this.pageStack !== undefined && this.pageStack !== null) {
901                    this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE);
902                  }
903                })
904              Button('ReplaceDetail', { stateEffect: true, type: ButtonType.Capsule})
905                .width('50%')
906                .height(40)
907                .margin(20)
908                .onClick(() => {
909                  if (this.pageStack !== undefined && this.pageStack !== null) {
910                    this.pageStack.replacePathByName('PageDetail2', 'testParam');
911                  }
912                })
913              Button('removeByName PageDetail1', { stateEffect: true, type: ButtonType.Capsule})
914                .width('50%')
915                .height(40)
916                .margin(20)
917                .onClick(() => {
918                  if (this.pageStack !== undefined && this.pageStack !== null) {
919                    this.pageStack.removeByName('PageDetail1');
920                  }
921                })
922              Button('removeByIndexes 0135', { stateEffect: true, type: ButtonType.Capsule})
923                .width('50%')
924                .height(40)
925                .margin(20)
926                .onClick(() => {
927                  if (this.pageStack !== undefined && this.pageStack !== null) {
928                    this.pageStack.removeByIndexes([0,1,3,5]);
929                  }
930                })
931              Button('switchFullScreenState true', { stateEffect: true, type: ButtonType.Capsule})
932                .width('50%')
933                .height(40)
934                .margin(20)
935                .onClick(() => {
936                  if (this.pageStack !== undefined && this.pageStack !== null) {
937                    this.pageStack.switchFullScreenState(true);
938                  }
939                })
940              Button('switchFullScreenState false', { stateEffect: true, type: ButtonType.Capsule})
941                .width('50%')
942                .height(40)
943                .margin(20)
944                .onClick(() => {
945                  if (this.pageStack !== undefined && this.pageStack !== null) {
946                    this.pageStack.switchFullScreenState(false);
947                  }
948                })
949              Button('pop', { stateEffect: true, type: ButtonType.Capsule})
950                .width('50%')
951                .height(40)
952                .margin(20)
953                .onClick(() => {
954                  if (this.pageStack !== undefined && this.pageStack !== null) {
955                    this.pageStack.pop('123');
956                  }
957                })
958              Button('popToHome1', { stateEffect: true, type: ButtonType.Capsule})
959                .width('50%')
960                .height(40)
961                .margin(20)
962                .onClick(() => {
963                  if (this.pageStack !== undefined && this.pageStack !== null) {
964                    this.pageStack.popToName('PageHome1');
965                  }
966                })
967              TextInput({placeholder: 'input your poptoindex ...', controller: this.controller })
968                .placeholderColor(Color.Grey)
969                .placeholderFont({ size: 14, weight: 400 })
970                .caretColor(Color.Blue)
971                .type(InputType.Number)
972                .width('50%')
973                .height(40)
974                .margin(20)
975                .fontSize(14)
976                .fontColor(Color.Black)
977                .onChange((value: String) => {
978                  this.text = value
979                })
980              Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule})
981                .width('50%')
982                .height(40)
983                .margin(20)
984                .onClick(() => {
985                  if (this.pageStack !== undefined && this.pageStack !== null) {
986                    this.pageStack.popToIndex(Number(this.text));
987                    this.controller.caretPosition(1)
988                  }
989                })
990              Button('moveIndexToTop', { stateEffect: true, type: ButtonType.Capsule})
991                .width('50%')
992                .height(40)
993                .margin(20)
994                .onClick(() => {
995                  if (this.pageStack !== undefined && this.pageStack !== null) {
996                    this.pageStack.moveIndexToTop(Number(this.text));
997                    this.controller.caretPosition(1)
998                  }
999                })
1000              Button('clear', { stateEffect: true, type: ButtonType.Capsule})
1001                .width('50%')
1002                .height(40)
1003                .margin(20)
1004                .onClick(() => {
1005                  if (this.pageStack !== undefined && this.pageStack !== null) {
1006                    this.pageStack.clear();
1007                  }
1008                })
1009              Button('disableAnimation', { stateEffect: true, type: ButtonType.Capsule})
1010                .width('50%')
1011                .height(40)
1012                .margin(20)
1013                .onClick(() => {
1014                  if (this.pageStack !== undefined && this.pageStack !== null) {
1015                    this.pageStack.disableAnimation(true);
1016                  }
1017                })
1018              Button('enableAnimation', { stateEffect: true, type: ButtonType.Capsule})
1019                .width('50%')
1020                .height(40)
1021                .margin(20)
1022                .onClick(() => {
1023                  if (this.pageStack !== undefined && this.pageStack !== null) {
1024                    this.pageStack.disableAnimation(false);
1025                  }
1026                })
1027              Button('setHomeWidthRange(20, 80)', { stateEffect: true, type: ButtonType.Capsule})
1028                .width('50%')
1029                .height(40)
1030                .margin(20)
1031                .onClick(() => {
1032                  if (this.pageStack !== undefined && this.pageStack !== null) {
1033                    this.pageStack.setHomeWidthRange(20, 80);
1034                  }
1035                })
1036              Button('setHomeWidthRange(-1, 20)', { stateEffect: true, type: ButtonType.Capsule})
1037                .width('50%')
1038                .height(40)
1039                .margin(20)
1040                .onClick(() => {
1041                  if (this.pageStack !== undefined && this.pageStack !== null) {
1042                    this.pageStack.setHomeWidthRange(-1, 20);
1043                  }
1044                })
1045              Button('setHomeWidthRange(20, 120)', { stateEffect: true, type: ButtonType.Capsule})
1046                .width('50%')
1047                .height(40)
1048                .margin(20)
1049                .onClick(() => {
1050                  if (this.pageStack !== undefined && this.pageStack !== null) {
1051                    this.pageStack.setHomeWidthRange(20, 120);
1052                  }
1053                })
1054            }
1055            .width('100%')
1056          }
1057          .width('100%')
1058          .height('92%')
1059        }
1060      }.hideTitleBar(true)
1061    }
1062  }
1063
1064  log(): boolean {
1065    hilog.info(0x0000, 'demotest', 'PageDetail1 build called');
1066    return true;
1067  }
1068}
1069```
1070
1071```typescript
1072// pages/PageDetail2.ets: detail page
1073import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation';
1074import { hilog } from '@kit.PerformanceAnalysisKit';
1075
1076@Component
1077export struct PageDetail2 {
1078  @State message: string = 'PageDetail2';
1079  @Consume('pageStack') pageStack: MultiNavPathStack;
1080  controller: TextInputController = new TextInputController()
1081  text: String = '';
1082  param: Object = new Object();
1083
1084  build() {
1085    if (this.log()) {
1086      NavDestination() {
1087        Column() {
1088          Column() {
1089            Text(this.message)
1090              .fontSize(40)
1091              .fontWeight(FontWeight.Bold)
1092          }
1093          .width('100%')
1094          .height('8%')
1095          Scroll(){
1096            Column() {
1097              Button('OpenHome', { stateEffect: true, type: ButtonType.Capsule})
1098                .width('50%')
1099                .height(40)
1100                .margin(20)
1101                .onClick(() => {
1102                  if (this.pageStack !== undefined && this.pageStack !== null) {
1103                    this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE);
1104                  }
1105                })
1106              Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule})
1107                .width('50%')
1108                .height(40)
1109                .margin(20)
1110                .onClick(() => {
1111                  if (this.pageStack !== undefined && this.pageStack !== null) {
1112                    this.pageStack.pushPathByName('PageDetail1', 'testParam');
1113                  }
1114                })
1115              Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule})
1116                .width('50%')
1117                .height(40)
1118                .margin(20)
1119                .onClick(() => {
1120                  if (this.pageStack !== undefined && this.pageStack !== null) {
1121                    this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE);
1122                  }
1123                })
1124              Button('ReplaceDetail', { stateEffect: true, type: ButtonType.Capsule})
1125                .width('50%')
1126                .height(40)
1127                .margin(20)
1128                .onClick(() => {
1129                  if (this.pageStack !== undefined && this.pageStack !== null) {
1130                    this.pageStack.replacePathByName('PageDetail2', 'testParam');
1131                  }
1132                })
1133              TextInput({placeholder: 'input your poptoindex ...', controller: this.controller })
1134                .placeholderColor(Color.Grey)
1135                .placeholderFont({ size: 14, weight: 400 })
1136                .caretColor(Color.Blue)
1137                .type(InputType.Number)
1138                .width('50%')
1139                .height(40)
1140                .margin(20)
1141                .fontSize(14)
1142                .fontColor(Color.Black)
1143                .onChange((value: String) => {
1144                  this.text = value
1145                })
1146              Button('moveIndexToTop', { stateEffect: true, type: ButtonType.Capsule})
1147                .width('50%')
1148                .height(40)
1149                .margin(20)
1150                .onClick(() => {
1151                  if (this.pageStack !== undefined && this.pageStack !== null) {
1152                    this.pageStack.moveIndexToTop(Number(this.text));
1153                    this.controller.caretPosition(1)
1154                  }
1155                })
1156              Button('pop', { stateEffect: true, type: ButtonType.Capsule})
1157                .width('50%')
1158                .height(40)
1159                .margin(20)
1160                .onClick(() => {
1161                  if (this.pageStack !== undefined && this.pageStack !== null) {
1162                    this.pageStack.pop();
1163                  }
1164                })
1165              TextInput({placeholder: 'input your poptoindex ...', controller: this.controller })
1166                .placeholderColor(Color.Grey)
1167                .placeholderFont({ size: 14, weight: 400 })
1168                .caretColor(Color.Blue)
1169                .type(InputType.Number)
1170                .width('50%')
1171                .height(40)
1172                .margin(20)
1173                .fontSize(14)
1174                .fontColor(Color.Black)
1175                .onChange((value: String) => {
1176                  this.text = value
1177                })
1178              Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule})
1179                .width('50%')
1180                .height(40)
1181                .margin(20)
1182                .onClick(() => {
1183                  if (this.pageStack !== undefined && this.pageStack !== null) {
1184                    this.pageStack.popToIndex(Number(this.text));
1185                    this.controller.caretPosition(1)
1186                  }
1187                })
1188              Button('clear', { stateEffect: true, type: ButtonType.Capsule})
1189                .width('50%')
1190                .height(40)
1191                .margin(20)
1192                .onClick(() => {
1193                  if (this.pageStack !== undefined && this.pageStack !== null) {
1194                    this.pageStack.clear();
1195                  }
1196                })
1197              Button('disableAnimation', { stateEffect: true, type: ButtonType.Capsule})
1198                .width('50%')
1199                .height(40)
1200                .margin(20)
1201                .onClick(() => {
1202                  if (this.pageStack !== undefined && this.pageStack !== null) {
1203                    this.pageStack.disableAnimation(true);
1204                  }
1205                })
1206              Button('enableAnimation', { stateEffect: true, type: ButtonType.Capsule})
1207                .width('50%')
1208                .height(40)
1209                .margin(20)
1210                .onClick(() => {
1211                  if (this.pageStack !== undefined && this.pageStack !== null) {
1212                    this.pageStack.disableAnimation(false);
1213                  }
1214                })
1215            }
1216            .width('100%')
1217          }
1218          .width('100%')
1219          .height('92%')
1220        }
1221      }
1222      .hideTitleBar(true)
1223    }
1224  }
1225
1226  log(): boolean {
1227    hilog.info(0x0000, 'demotest', 'PageDetail2 build called');
1228    return true;
1229  }
1230}
1231```
1232
1233```typescript
1234// pages/PageFull1.ets: page that does not participate in split-screen display and is displayed in full-screen mode by default
1235import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation';
1236import { hilog } from '@kit.PerformanceAnalysisKit';
1237
1238@Component
1239export struct PageFull1 {
1240  @State message: string = 'PageFull1';
1241  @Consume('pageStack') pageStack: MultiNavPathStack;
1242  controller: TextInputController = new TextInputController()
1243  text: String = '';
1244
1245  build() {
1246    if (this.log()) {
1247      NavDestination() {
1248        Column() {
1249          Column() {
1250            Text(this.message)
1251              .fontSize(40)
1252              .fontWeight(FontWeight.Bold)
1253          }
1254          .width('100%')
1255          .height('8%')
1256
1257          Scroll() {
1258            Column() {
1259              Button('OpenHome', { stateEffect: true, type: ButtonType.Capsule })
1260                .width('50%')
1261                .height(40)
1262                .margin(20)
1263                .onClick(() => {
1264                  if (this.pageStack !== undefined && this.pageStack !== null) {
1265                    this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE);
1266                  }
1267                })
1268              Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule })
1269                .width('50%')
1270                .height(40)
1271                .margin(20)
1272                .onClick(() => {
1273                  if (this.pageStack !== undefined && this.pageStack !== null) {
1274                    this.pageStack.pushPathByName('PageDetail1', 'testParam');
1275                  }
1276                })
1277              Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule })
1278                .width('50%')
1279                .height(40)
1280                .margin(20)
1281                .onClick(() => {
1282                  if (this.pageStack !== undefined && this.pageStack !== null) {
1283                    this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE);
1284                  }
1285                })
1286              Button('ReplaceFULL', { stateEffect: true, type: ButtonType.Capsule })
1287                .width('50%')
1288                .height(40)
1289                .margin(20)
1290                .onClick(() => {
1291                  if (this.pageStack !== undefined && this.pageStack !== null) {
1292                    this.pageStack.replacePathByName('PageFull1', 'testParam', true);
1293                  }
1294                })
1295              Button('removeByName PageFull1', { stateEffect: true, type: ButtonType.Capsule })
1296                .width('50%')
1297                .height(40)
1298                .margin(20)
1299                .onClick(() => {
1300                  if (this.pageStack !== undefined && this.pageStack !== null) {
1301                    this.pageStack.removeByName('PageFull1');
1302                  }
1303                })
1304              Button('removeByIndexes 0135', { stateEffect: true, type: ButtonType.Capsule })
1305                .width('50%')
1306                .height(40)
1307                .margin(20)
1308                .onClick(() => {
1309                  if (this.pageStack !== undefined && this.pageStack !== null) {
1310                    this.pageStack.removeByIndexes([0, 1, 3, 5]);
1311                  }
1312                })
1313              Button('pop', { stateEffect: true, type: ButtonType.Capsule })
1314                .width('50%')
1315                .height(40)
1316                .margin(20)
1317                .onClick(() => {
1318                  if (this.pageStack !== undefined && this.pageStack !== null) {
1319                    this.pageStack.pop();
1320                  }
1321                })
1322              TextInput({ placeholder: 'input your poptoindex ...', controller: this.controller })
1323                .placeholderColor(Color.Grey)
1324                .placeholderFont({ size: 14, weight: 400 })
1325                .caretColor(Color.Blue)
1326                .width('50%')
1327                .height(40)
1328                .margin(20)
1329                .type(InputType.Number)
1330                .fontSize(14)
1331                .fontColor(Color.Black)
1332                .onChange((value: String) => {
1333                  this.text = value
1334                })
1335              Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule })
1336                .width('50%')
1337                .height(40)
1338                .margin(20)
1339                .onClick(() => {
1340                  if (this.pageStack !== undefined && this.pageStack !== null) {
1341                    this.pageStack.popToIndex(Number(this.text));
1342                    this.controller.caretPosition(1)
1343                  }
1344                })
1345            }
1346            .width('100%')
1347          }
1348          .width('100%')
1349          .height('92%')
1350        }
1351      }
1352      .hideTitleBar(true)
1353      .onBackPressed(() => {
1354        hilog.info(0x0000, 'demotest', 'PageFull1 onBackPressed: ');
1355        return false;
1356      })
1357    }
1358  }
1359
1360  log(): boolean {
1361    hilog.info(0x0000, 'demotest', 'PageFull1 build called');
1362    return true;
1363  }
1364}
1365```
1366
1367```typescript
1368// pages/PagePlaceholder.ets: placeholder page
1369import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation';
1370import { hilog } from '@kit.PerformanceAnalysisKit';
1371
1372@Component
1373export struct PagePlaceholder {
1374  @State message: string = 'PagePlaceholder';
1375  @Consume('pageStack') pageStack: MultiNavPathStack;
1376  controller: TextInputController = new TextInputController()
1377  text: String = '';
1378  lastBackTime: number = 0;
1379
1380  build() {
1381    if (this.log()) {
1382      NavDestination() {
1383        Column() {
1384          Column() {
1385            Text(this.message)
1386              .fontSize(50)
1387              .fontWeight(FontWeight.Bold)
1388          }
1389          .width('100%')
1390          .height('8%')
1391
1392          Stack({alignContent: Alignment.Center}) {
1393            Text('Placeholder sample page')
1394              .fontSize(80)
1395              .fontWeight(FontWeight.Bold)
1396              .fontColor(Color.Red)
1397          }
1398          .width('100%')
1399          .height('92%')
1400        }
1401      }.hideTitleBar(true)
1402    }
1403  }
1404
1405  log(): boolean {
1406    hilog.info(0x0000, 'demotest', 'PagePlaceholder build called');
1407    return true;
1408  }
1409}
1410```
1411