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 consists of multiple pages. Both Navigation and @ohos.router provide the ability to navigate between pages within the application.

In the NavDestination framework, a page is carried by the NavDestination component and refers to the content contained in 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.
Opens the page stack object to allow developers to inherit it for better management of the page display.

Capability Comparison

Expand

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 & pushDestination	pushUrl & pushNamedRoute
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 & replacePathByName	replaceUrl & replaceNamedRoute
Clearing the navigation stack	clear	clear
Removing specific routes from the navigation stack	removeByIndexes & 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, with the duration of the pageTransition method set 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()
Move operations within the navigation stack	moveToTop & 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

Send feedback

Was this page helpful?

Send feedback

Reach out to us through the community for any other questions.

Community Q&A Intelligent Assistant