HarmonyOS鸿蒙Next中如何配置应用的页面路由？

HarmonyOS鸿蒙Next中如何配置应用的页面路由？ 如何配置应用的页面路由？

4 回复

【解决方案】

当前HarmonyOS支持两套路由机制（Navigation和Router），Navigation作为后续长期演进及推荐的路由选择方案，其与Router比较的优势如下：

  • 易用性层面：
    • Navigation天然具备标题、内容、回退按钮的功能联动，开发者可以直接使用此能力；Router若要实现此能力，需要自行定义。
    • Navigation的页面是由组件构成，易于实现共享元素的转场；router仅用于被@Entry修饰的页面之间的跳转。
  • 功能层面：
    • Navigation天然支持一多，Router不支持。
    • Navigation没有路由数量限制，Router限制32个。
    • Navigation可以获取到路由栈NavPathStack，并对路由栈进行操作，Router不支持。
    • Navigation可以嵌套在模态对话框中，也就是说可以模态框中定义路由，Router不支持。
    • Navigation的组件全量由开发者自行控制，开发者可以自定义复杂的动效和属性的设置（背景、模糊等），Router的page对象不对外暴露，开发者无法对page进行处理。
  • 性能层面：
    • Navigation传递参数性能更优，Navigation通过引用传递，Router通过深拷贝完成。
    • Navigation可以配合动态加载，实现组件动态加载，Router页面使用@Entry进行修饰，当前模块加载时会生成全量页面。

Navigation & Router结构对比

  • Navigation中的每个页面，承载在一个page里，通过NavDestination容器实现基于组件的页面跳转。
  • Router的每一个页面配置在一个单独的page中，通过@Entry进行标识。

Navigation & Router能力对比

业务场景 Navigation能力 Router能力
跳转指定页面 pushPath & pushDestination pushUrl & pushNameRouter
跳转HSP中页面 支持，需要先import页面 支持
跳转HAR中页面 支持，需要先import页面 支持
跳转传参 支持 支持
获取指定页面参数 支持 不支持
跳转结果回调 支持 支持
跳转单例页面 可通过判断栈内有没有此页面，调用moveToTop实现 支持
页面返回 pop back
页面返回传参 支持 支持
返回指定路由 popToName&popToIndex 不支持
页面返回弹窗 通过路由拦截实现 showAlertBeforeBackPage
路由替换 replacePath & replacePathByName replaceUrl & replaceNameRouter
路由栈清理 clear clear
清理指定路由 removeByIndexes & removeByName 不支持
转场动画 支持 支持
自定义转场动画 支持 支持
屏蔽转场动画 pushDestination(info: NavPathInfo, animated?: boolean) & pathStack.disableAnimation（true） 支持 duration属性设置为0
共享元素动画 支持 不支持
页面生命周期监听 UIObserver.on(‘navDestinationUpdate’) UIObserver.on(‘routerPageUpdate’)
获取页面栈对象 支持 不支持
路由拦截 setInterception 不支持
路由栈信息查询 getAllPathName & getParamByIndex & getParamByName&size getState() & getLength()
路由栈操作 moveToTop & moveIndexToTop 不支持
沉浸式页面 支持 不支持，需通过window配置
设置页面属性（背景，模糊等） 支持，backgroundBlurStyle 不支持
设置页面标题栏（title）和工具栏（toolbar） 支持 不支持
模态嵌套路由 支持 不支持

使用场景选择

Navigation router
项目只有一个主模块，同一个模块内的页面之间跳转 项目包含多个模块，不同模块间的页面跳转。比如项目有主项目，A、B模块，主项目的H界面要跳转到A模块的I界面，或者A模块的I界面要跳转到B模块的J界面

Navigation相比router功能更丰富，用法更灵活，且router后续不再演进新的功能，推荐使用Navigation。

 

更多关于HarmonyOS鸿蒙Next中如何配置应用的页面路由？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在应用模块的module.json5中添加路由表关联

{
  "module": {
    "routerMap": "$profile:route_map"
  }
}

在src/main/resources/base/profile/route_map.json中定义路由映射规则

[
  {
    "name": "detailPage",
    "pageSourceFile": "src/main/ets/pages/Detail.ets",
    "data": { "description": "详情页" }
  }
]

在HarmonyOS Next中配置应用页面路由，需使用@ohos.router模块。首先在模块配置文件导入router：import router from '@ohos.router'。页面跳转通过router.pushUrl()方法实现，参数为目标页面的URL。例如：router.pushUrl({url: 'pages/Detail'})。URL路径需在项目的resources/base/profile/目录下的路由配置文件main_pages.json中预先定义。返回上一页使用router.back()。确保所有页面路径已在配置文件中注册。

在HarmonyOS Next中，页面路由通过Router模块实现，支持页面间的导航和参数传递。以下是基本配置步骤：

  1. 在module.json5中注册路由
    在对应UIAbility的"pages"数组中声明页面路径，例如：

    "pages": [
  "pages/Index",
  "pages/Detail"
]

    首项默认为应用入口页。

  2. 页面跳转与参数传递
    使用router.pushUrl()导航到目标页，并通过params传递参数：

    import { router } from '[@kit](/user/kit).ArkUI';

// 跳转到Detail页并传递参数
router.pushUrl({
  url: 'pages/Detail',
  params: { id: 123 }
});

  3. 目标页面接收参数
    在Detail页通过router.getParams()获取参数：

    const params = router.getParams() as { id: number };

  4. 返回上一页
    使用router.back()实现返回操作。

  5. 高级路由模式
    支持Standard（标准栈）和Single（单实例）模式：

    router.pushUrl({
  url: 'pages/Detail',
  mode: router.RouterMode.Single // 清空栈并创建新实例
});

注意：页面路径需与文件实际路径一致，且跳转前需确保目标页面已注册。

回到顶部