网站导航
> 技术文档 > 【鸿蒙面试题-3】深入理解router与Navigation_鸿蒙 router

【鸿蒙面试题-3】深入理解router与Navigation_鸿蒙 router

网友: 技术文档 2025-09-03 10:20:33

5. 路由

1.页面路由(router模式）

1.概述

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

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

  • 自定义组件：@Component 装饰的UI单元，
  • 页面：即应用的UI页面。可以由一个或者多个自定义组件组成。
    • @Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry

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

步骤：

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

  1. router控制页面跳转

  1. 带参数跳转并获取

2.pushUrl 与 replaceUrl

先来看看 pushUrl的情况

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

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

再来看看replaceUrl的情况

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

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

页面栈相关 api

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

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

  1. standard（标准实例模式）
  2. Single（单实例模式）

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

  1. Standard：无论之前是否添加过，一直添加到页面栈【默认】
    1. 场景：适用于每次跳转都呈现全新内容或状态的场景，避免数据展示紊乱（数据变化）
  1. Single：如果之前加过页面，会使用之前添加的页面【需要添加参数手动修改】
    1. 场景：适用于那些需要保留页面状态或避免重复创建相同页面的场景（数据不变化）

路由模式语法：

总结

路由跳转的方式有pushUrl和replaceUrl

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

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

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

  1. 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的路由重定向到page2 let 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@Componentstruct Demo {param: Record = {\'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\'@Builder function MyPage1() { page1() }@Component struct page1 { build() { //3.子页面必须要使用 NavDestination 把所有结构都包起来 NavDestination() { Column() { Button(\'回到上一页\').onClick(() => { pathStack.pop() }) } .width(\"100%\") .height(\"100%\") .justifyContent(FlexAlign.Center) }.title(\'page1\') } }
import { pathStack } from \'./utils/pathStack\'@Builderfunction MyPage2() { page2()}@Componentstruct page2 { @State param: Record = {};aboutToAppear(): void { // AlertDialog.show({ message:JSON.stringify(pathStack.getParamByName(\'page2\'),null,2) }) // 获取page2页面的参数 this.param = pathStack.getParamByName(\'page2\').pop() as Record;} 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) } }}

四川饮食文化

网络标签：

相关问题