1# Component Navigation and Page Routing Overview 2 3The **Navigation** component and the APIs in the **Router** (@ohos.router) module both facilitate page redirection within an application. Yet, the **Navigation** component excels by offering intra-component redirection, which is particularly beneficial in one-time development for multi-device deployment. It provides more flexible page stack operations and a wider range of animations and lifecycles. Therefore, to deliver a better user experience, use the **Navigation** component to implement page redirection and intra-component redirection whenever possible. 4 5## Architecture Differences 6 7In 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: 8 9 10 111. Explicitly distinguishes the title bar, content area, and toolbar in the API for enhanced management and UX animation flexibility. 12 132. Explicitly provides a routing container, allowing you to decide its location, which can be in a modal, sheet, or dialog box. 14 153. 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. 16 174. Enables flexible page configuration by allowing you to determine the relationship between page aliases and UI through [UIBuilder](../quick-start/arkts-builder.md). 18 195. Transforms page transition animations into component property animations, offering a wider and more flexible range of transition effects. 20 216. Provides an inheritable page stack object for improved page display management. 22 23## Capability Comparison 24 25| Scenario | Navigation | Router | 26| --------------------------------------------- | ------------------------------------- | -------------------------------------- | 27| One-time development for multi-device deployment | Supported. The Auto mode is provided to automatically adapt to single- or double-column layout. | Not supported | 28| Navigation to a specific page | pushPath & pushDestination | pushUrl & pushNameRoute | 29| Navigation to a page within an HSP | Supported | Supported | 30| Navigation to a page within a HAR | Supported | Supported | 31| Passing parameters during navigation | Supported | Supported | 32| Obtaining parameters of a specific page | Supported | Not supported | 33| Type of parameters passed | Passed as an object | Passed as an object, methods not supported within the object| 34| Navigation result callback | Supported | Supported | 35| Navigation to a singleton page | Supported | Supported | 36| Return to a previous page | Supported | Supported | 37| Passing parameters on returning to a previous page | Supported | Supported | 38| Returning to a specific route | Supported | Supported | 39| Dialog box for returning to a previous page | Supported, implemented through route interception | showAlertBeforeBackPage | 40| Route replacement | replacePath & replacePathByName | replaceUrl & replaceNameRoute | 41| Clearing the navigation stack | clear | clear | 42| Removing specific routes from the navigation stack | removeByIndexes & removeByName | Not supported | 43| Transition animation | Supported | Supported | 44| Custom transition animation | Supported | Supported, with limited animation types | 45| Disabling transition animation | Supported, with global or one-time setting | Supported, by setting **duration** in the **pageTransition** API to **0**| 46| Shared element animation with **geometryTransition** | Supported (shared between **NavDestination** components) | Not supported | 47| Listening for page lifecycle | UIObserver.on('navDestinationUpdate') | UIObserver.on('routerPageUpdate') | 48| Obtaining a page stack object | Supported | Not supported | 49| Route interception | Supported through **setInterception** | Not supported | 50| Route stack information query | Supported | getState() & getLength() | 51| Move operations within the navigation stack | moveToTop & moveIndexToTop | Not supported | 52| Immersive pages | Supported | Not supported; requires window configuration | 53| Setting the title bar and toolbar| Supported | Not supported | 54| Modal nested routing | Supported | Not supported | 55
