HarmonyOS鸿蒙Next应用开发-ArkUI中Navigation页面跳转

HarmonyOS鸿蒙Next应用开发-ArkUI中Navigation页面跳转

导读

本文基于（API10+）以上，深入学习一下ArkUI的导航组件。着重介绍Navigation的用法（官网推荐），以代替页面路由（@ohos.router）。本文只文讨论如何利用Navigation路由组件如何跳转的，如：页面与页面跳转，页面和组件跳转，跨包动态路由等，尽量做到看了可以拿来用。Navigation的结构、属性等，会在代码块上尽量做注释解释或者可以前往官方文档查看；

介绍

Navigation组件：是路由导航根视图容器，一般作为Page页面(@Entry修饰符)的component作为跟容器使用。在应用开发中起到了模块内和跨模块（对于在想要跳转到的共享包HAR或者HSP页面里）的路由切换。

作为前端工程师，使用惯了vue-router/react-router，在使用Navigation有一定的学习成本，但使用起来后会发现其用法和vue-router/react-router的用法很像。

页面跳转

实现组件跳转

这里实现组件跳转要利用到Navigation组件、NavDestination组件、NavPathStack来实现跳转，这里简单介绍：

• Navigation路由导航根视图容器
• NavDestination是Navigation子页面的根容器用于承载子页面的一些特殊属性以及生命周期等，结构属性上跟Navigation一样
• NavPathStack管理路由地址的容器

Navigation

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

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

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

1. 在功能组件中创建route_map.json文件

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

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

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

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

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

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

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

[@Entry](/user/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'))
    }
}

1. UserCenter中的子控制器

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

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

[@Entry](/user/Entry)
@Component
export struct UserInfoPage {
  @Consume pageStack: NavPathStack

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

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

1. PageConstant文件

   用于页面统一添加和管理

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

}

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