Component Navigation and Page Routing Overview
A page serves as a visual interaction unit composed of layouts, components, and interaction logic. It encapsulates specific functional logic and information presentation, forming the core interface medium for user-application interaction. A complete application typically comprises multiple pages. Both the Navigation component and @ohos.router module support page navigation within applications.
- In the Navigation framework, a page corresponds to the content encapsulated within a NavDestination component.
- In the @ohos.router framework, a page refers to a custom component decorated with the @Entry decorator.
Compared with@ohos.router, the Navigation framework embeds pages within Navigation components for navigation, offering enhanced multi-device adaptation capabilities, more flexible page stack management, and richer animation effects and lifecycle support. Therefore, to deliver a better user experience, prioritize the Navigation component for implementing both page navigation and intra-component navigation whenever possible.
Architecture Differences
In the ArkUI component tree hierarchy, pages that were originally managed by the Router module are located beneath the stage management node of the page stack. Navigation, as a navigation container component, can be mounted under a single page node and can also be stacked and nested. Navigation manages the title bar, toolbar, and content area, an area designed to display the content of custom pages and allowing for page routing. The design of Navigation has the following advantages:
-
Explicitly distinguishes the title bar, content area, and toolbar in the API for enhanced management and UX animation flexibility.
-
Explicitly provides a routing container, allowing you to decide its location, which can be in a modal, sheet, or dialog box.
-
Integrates UX design and one-time development for multi-device deployment capabilities, with default capabilities for unified title display, page switching, and single or double column adaptation.
-
Enables flexible page configuration by allowing you to determine the relationship between page aliases and UI through UIBuilder.
-
Transforms page transition animations into component property animations, offering a wider and more flexible range of transition effects.
-
Provides an inheritable page stack object for improved page display management.
Capability Comparison
| Scenario | Navigation | Router |
|---|---|---|
| One-time development for multi-device deployment | Supported (The Auto mode is provided to automatically adapt to single- or double-column layout.) | Not supported |
| Navigation to a specific page | pushPath and pushDestination | pushUrl and pushNameRoute |
| Navigation to a page within an HSP | Supported | Supported |
| Navigation to a page within a HAR | Supported | Supported |
| Passing parameters during navigation | Supported | Supported |
| Obtaining parameters of a specific page | Supported | Not supported |
| Type of parameters passed | Passed as an object | Passed as an object, method variables not supported within the object |
| Navigation result callback | Supported | Supported |
| Navigation to a singleton page | Supported | Supported |
| Return to a previous page | Supported | Supported |
| Passing parameters on returning to a previous page | Supported | Supported |
| Returning to a specific route | Supported | Supported |
| Dialog box for returning to a previous page | Supported, implemented through route interception | showAlertBeforeBackPage |
| Route replacement | replacePath and replacePathByName | replaceUrl and replaceNameRoute |
| Clearing the navigation stack | clear | clear |
| Removing specific routes from the navigation stack | removeByIndexes and removeByName | Not supported |
| Transition animation | Supported | Supported |
| Custom transition animation | Supported | Supported, with limited animation types |
| Disabling transition animation | Supported, with global or one-time settings | Supported, by setting duration in the pageTransition API to 0 |
| Shared element animation with geometryTransition | Supported through sharing between NavDestination components | Not supported |
| Listening for page lifecycle | UIObserver.on('navDestinationUpdate') | UIObserver.on('routerPageUpdate') |
| Obtaining a page stack object | Supported | Not supported |
| Route interception | Supported through setInterception | Not supported |
| Route stack information query | Supported | getState() and getLength() |
| Move operations within the navigation stack | moveToTop and moveIndexToTop | Not supported |
| Immersive pages | Supported | Not supported; requires window configuration |
| Setting the title bar and toolbar | Supported | Not supported |
| Modal nested routing | Supported | Not supported |