「HarmonyNextOS」页面路由跳转Router更换为Navigation

前言

前段时间，鸿蒙发布了HarmonyNextOS系统，API直接升级到了12，许多API都发生了改变，页面跳转页从当初推荐的Router变换成Navigation，并且从API Version 10之后，都推荐使用NavPathStack来实现页面路由，也就是Navigation组件来实现页面跳转

这篇文章来看看两种路由跳转的前后变化，以及两种路由跳转的具体使用方法

1. Router和Navigation架构差异

从ArkUI组件树层级上来看，原先由Router管理的page在页面栈管理节点stage的下面。Navigation作为导航容器组件，可以挂载在单个page节点下，也可以叠加、嵌套。Navigation管理了标题栏、内容区和工具栏，内容区用于显示用户自定义页面的内容，并支持页面的路由能力。Navigation的这种设计上有如下优势：

1. 接口上显式区分标题栏、内容区和工具栏，实现更加灵活的管理和UX动效能力；
2. 显式提供路由容器概念，由开发者决定路由容器的位置，支持在全模态、半模态、弹窗中显示；
3. 整合UX设计和一多能力，默认提供统一的标题显示、页面切换和单双栏适配能力；
4. 基于通用UIBuilder能力，由开发者决定页面别名和页面UI对应关系，提供更加灵活的页面配置能力；
5. 基于组件属性动效和共享元素动效能力，将页面切换动效转换为组件属性动效实现，提供更加丰富和灵活的切换动效；
6. 开放了页面栈对象，开发者可以继承，能更好的管理页面显示。
   

2. 具体使用方法

2.1 Router

这里的Router指的就是系统的@ohos.router，官方开发文档链接:页面路由(@ohos.router)

在之前使用router进行路由跳转非常方便，只需要在摁钮的点击事件触发router.pushUrl()方法即可完成跳转，参数用params进行传递（注：这里使用了PageConstant，作为所有页面跳转地址的集合，方便统一管理）

// 父页面
import router from '@ohos.router';
import { UserInfoBean } from '../../bean/UserInfoBean';
import { PageConstant } from '../PageConstant';

@Entry
@Component
export struct UserCenterPage {
  @State userInfo: UserInfoBean = new UserInfoBean()
  
    build() {
      Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Start}) {
        List() {
          ListItem() {
            HeaderView({userInfo: this.userInfo})
              .onClick(() => {
                router.pushUrl({url: PageConstant.Url_User_Info_Page, params: {'userInfo': this.userInfo}})
              })
          }
        }
      }
      .padding({left: 16, right: 16})
      .backgroundColor($r('app.color.smart_F7F7F7'))
    }
}

// 子页面
import router from '@ohos.router'
import { UserInfoBean } from '../../bean/UserInfoBean'


struct UserInfoPage {
  @State userInfo: UserInfoBean = new UserInfoBean()
  
    aboutToAppear() {
      this.userInfo = router.getParams()?.['userInfo']
    }

    build() {
        //页面布局
    }

}

// 页面集合
export class PageConstant {

// 个人信息页面
static readonly Url_User_Info_Page = 'pages/UserCenter/UserInfoPage'
    
}

这就是使用router的页面跳转，相对比较简单且轻松

2.2 Navigation

在后续重构的项目中页面路由跳转使用了Navigation，并且也使用了静态库组件化的开发模式，所以会有一些功能模块组件需要额外执行的操作，如果只是单项目均在项目的对应文件中进行相应操作即可

1.在根控制器中创建NavPathStack并使用Navigation

注：这里是为了方便后面的页面可以进行在同一个NavPathStack路由栈中进行跳转操作

@Entry
@Component
struct Index {
    // 这里创建数据双向同步的父组件
    @Provide('pageStack') pageStack: NavPathStack = new NavPathStack()
    
    build() {
      Navigation(this.pageStack) {
          // 其他UI代码
        }
    }
}

2.在功能组件中创建route_map.json文件
需要在base文件夹下创建profile文件夹，并且在profile文件夹下创建route_map.json文件
，具体文件路径如图

3.在route_map.json文件中创建routerMap
具体routerMap模版如下，注buildFunction需要与子控制器中的入口函数保持一致

{
  // UserCenter组件中的routerMap
  "routerMap": [
    {
      "name": "UserInfoPage",
      "pageSourceFile": "src/main/ets/Pages/UserInfoPage.ets",
      "buildFunction": "UserInfoPageBuilder",
      "data": {
        "description" : "this is UserInfoPage"
      }
    },
    {
        //其他页面
    }
  ]
}

4.在功能组件的module.json5文件中添加routerMap

{
  "module": {
    "name": "userCenter",
    "type": "har",
    "deviceTypes": [
      "default",
      "tablet",
      "2in1"
    ],
    // 新增routerMap
    "routerMap": "$profile:route_map"
  }
}

5.UserCenter功能组件中的父控制器

注：这里同样采用PageConstant进行页面统一管理

import { UserInfoBean } from '../Beans/UserInfoBean'
import { PageConstant } from '../PageConstant'

@Entry
@Component
export struct UserCenterPage {
  @State userInfo: UserInfoBean = new UserInfoBean()
  @Consume pageStack: NavPathStack
   
    build() {
      Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Start}) {
        List() {
          ListItem() {
            HeaderView({userInfo: this.userInfo})
              .onClick(() => {
                // Navgation With PageUrl
                this.pageStack.pushPathByName(PageConstant.Url_User_Info_Page, null, true)
              })
          }

        }
        .scrollBar(BarState.Off)
      }
      .padding({ left:16, right:16 })
      .backgroundColor($r('app.color.smart_F7F7F7'))
    }

}

6.UserCenter中的子控制器

注:子控制器需要使用NavDestination()进行承接，并且需要设置入口函数

@Builder
export function UserInfoPageBuilder() {
  UserInfoPage()
}

@Entry
@Component
export struct UserInfoPage {
  @Consume pageStack: NavPathStack

  build() {
    NavDestination() {
      Column() {
        Row() {

        }
      }
      .width('100%')
      .height('100%')
      .backgroundColor(Color.Pink)
    }
    .hideTitleBar(true)
  }
}

7.PageConstant文件
用于页面统一添加和管理

export class PageConstant {
  // 用户信息页面
  static readonly Url_User_Info_Page = 'UserInfoPage'

}

所以Navigation相比于router步骤会相对繁琐一些，但后续推荐更改为Navigation进行路由跳转。

3. 参考文档：

组件导航 (Navigation) (推荐)

页面路由 (@ohos.router)

总结

当前HarmonyOs仍在初步学习过程中，大家如果感兴趣或者有问题可以一起沟通交流 如果该文章对你有所帮助的话，可以点赞、收藏并关注一下！后续会持续更新更多技术内容