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

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. 口诀：一入口，一配置

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. 场景： 适用于每次跳转都呈现全新内容或状态的场景，避免数据展示紊乱（数据变化）

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

1. 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
@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'

@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'

@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)
    }
  }
}