当前位置：首页 > news >正文

【鸿蒙HarmonyOS】深入理解router与Navigation

news 来源：原创 2025/7/7 0:28:06

5. 路由

1.页面路由(router模式）

1.概述

页面路由指的是在应用程序中实现不同页面之间的跳转，以及数据传递。

我们先明确自定义组件和页面的关系：

自定义组件：@Component 装饰的UI单元，
页面：即应用的UI页面。可以由一个或者多个自定义组件组成。

- @Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry

通过 Router 模块就可以实现这个功能. import { router } from '@kit.ArkUI'

步骤：

创建页面 -> 页面与组件不同的地方是有且只有一个入口组件（ @Entry修饰），并且在src/main/resources/base/profile/main_pages.json有配置好了页面路径

1. 口诀：一入口，一配置

router控制页面跳转

带参数跳转并获取

2.pushUrl 与 replaceUrl

先来看看 pushUrl的情况

默认打开首页 → 首页入栈
pushUrl 去详情页 → 详情页入栈
back 返回上一页 → 详情页出栈
此时页面栈中应该只有一个页面

整一个过程中，都可以 router.getLength 进行查看

再来看看replaceUrl的情况

默认打开首页 → 首页入栈
replaceUrl 去详情页 → 详情页替换首页，首页销毁
back 无法返回 → 没有上一页

跳转到登录页面时可以使用 replaceUrl，因为无需在页面栈中保存其他页面的页面栈信息了。

页面栈相关 api

  // 获取页面栈长度router.getLength()// 获取页面状态let page = router.getState();console.log('页面栈数量:' + page.index);console.log('跳转的路由:' + page.name);console.log('路由路径:' + page.path);// 清空页面栈// router.clear()

3.路由模式

路由提供了两种不同的跳转模式：

standard（标准实例模式）
Single（单实例模式）

不同模式的决定了页面是否会创建多个实例：

Standard：无论之前是否添加过，一直添加到页面栈【默认】

1. 场景：适用于每次跳转都呈现全新内容或状态的场景，避免数据展示紊乱（数据变化）

Single：如果之前加过页面，会使用之前添加的页面【需要添加参数手动修改】

1. 场景：适用于那些需要保留页面状态或避免重复创建相同页面的场景（数据不变化）

路由模式语法：

总结

路由跳转的方式有pushUrl和replaceUrl

pushUrl的跳转要考虑两种模式：标准模式，单例模式

pushUrl({}，模式为标准模式（默认的模式）) -> 页面栈中的表现形式

pushUrl({}，模式为单例模式) -> 页面栈中的表现形式

replaceUrl() -> 跳转以后的前一个页面自动销毁了

2.Navigation 路由

概述

组件导航（Navigation）主要用于实现页面间以及组件内部的页面跳转，支持在不同组件间传递跳转参数，提供灵活的跳转栈操作，从而更便捷地实现对不同页面的访问和复用。本文将从组件导航（Navigation）的显示模式、路由操作、子页面管理、跨包跳转以及跳转动效等几个方面进行详细介绍。

Navigation是路由导航的根视图容器，一般作为页面（@Entry）的根容器，包括单栏（Stack）、分栏（Split）和自适应（Auto）三种显示模式。Navigation组件适用于模块内和跨模块的路由切换，通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。一次开发，多端部署场景下，Navigation组件能够自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果。

Navigation组件主要包含导航页和子页。导航页由标题栏（包含菜单栏）、内容区和工具栏组成，可以通过hideNavBar属性进行隐藏，导航页不存在页面栈中，与子页，以及子页之间可以通过路由操作进行切换。

1.是什么

Navigation是华为HarmonyOS中的一个路由导航组件，主要用于实现页面间的跳转和路由管理。它提供了丰富的功能和灵活的配置选项，支持模块内和跨模块的路由切换。Navigation组件不仅简化了路由切换的逻辑，还提升了应用的导航效率和用户体验。

2. 为什么

1.简化路由管理：Navigation通过组件级的路由能力，简化了页面间的跳转逻辑，使得路由管理更加直观和便捷。
2.支持模块化开发：Navigation支持模块内和跨模块的路由切换，有助于实现模块间的解耦，提升代码的可维护性和可扩展性。
3.丰富的动效支持：Navigation提供了丰富的转场动画和共享元素转场能力，增强了页面切换的视觉效果。
4.生命周期管理：Navigation支持页面生命周期的监听和管理，开发者可以更方便地处理页面的显示和隐藏等状态变化。
5.动态路由：Navigation支持动态路由，允许在运行时动态加载和注册路由，提升了路由管理的灵活性。

3.怎么用


// 1.全局声明一个路径栈
export const pathStack = new NavPathStack()
//路由拦截
pathStack.setInterception({willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar",operation: NavigationOperation, animated: boolean) => {if (typeof to === "string") {AlertDialog.show({ message:JSON.stringify('回到了首页',null,2) })return;}// 将跳转到Page1的路由重定向到page2let target: NavDestinationContext = to as NavDestinationContext;AlertDialog.show({ message:JSON.stringify(target,null,2) })if (target.pathInfo.name === 'page1') {// target.pathStack.pop();// target.pathStack.pushPathByName('page2', null);}}
})

import { pathStack } from './utils/pathStack';@Entry
@Component
struct Demo {
param: Record<string, string> = {'name':'zs'};build() {// 2.使用页面栈Navigation(pathStack) {Button('跳转到page1').margin({bottom:10}).onClick(() => {// 页面跳转pathStack.pushPathByName('page1',null)})Button('跳转到page2').onClick(() => {// 页面跳转pathStack.pushPathByName('page2',this.param)})}.title('My Page');}
}


{"routerMap": [{"name": "page1","pageSourceFile": "src/main/ets/pages/page1.ets","buildFunction": "MyPage1","data": {"description": "这是页面1"}},{"name": "page2","pageSourceFile": "src/main/ets/pages/page2.ets","buildFunction": "MyPage2","data": {"description": "这是页面2"}}]
}

import { pathStack } from './utils/pathStack'@Builderfunction MyPage1() {page1()}@Componentstruct page1 {build() {//3.子页面必须要使用 NavDestination 把所有结构都包起来NavDestination() {Column() {Button('回到上一页').onClick(() => {pathStack.pop()})}.width("100%").height("100%").justifyContent(FlexAlign.Center)}.title('page1')}}

import { pathStack } from './utils/pathStack'@Builder
function MyPage2() {page2()
}@Component
struct page2 {@State param: Record<string, string> = {};
aboutToAppear(): void {// AlertDialog.show({ message:JSON.stringify(pathStack.getParamByName('page2'),null,2) })// 获取page2页面的参数this.param = pathStack.getParamByName('page2').pop() as Record<string, string>;}build() {//2.子页面必须要使用 NavDestination 把所有结构都包起来NavDestination() {Column({space:5}) {Text(`你好${this.param?.name}`)Button('回到上一页').onClick(() => {pathStack.pop()})Button('回到首页').onClick(() => {// 返回到根首页（清除栈中所有页面）pathStack.clear()})Button('去往page1').onClick(() => {// 返回到根首页（清除栈中所有页面）pathStack.pushPathByName('page1',null)})}.width("100%").height("100%").justifyContent(FlexAlign.Center)}}
}