Harmonyos-Navigation路由跳转

概述

Navigation是路由容器组件，一般作为首页的根容器，适用于模块内和跨模块的路由切换。Navigation子页是NavDestination包含的子组件，使用NavPathStack实现页面路由。

Navigation路由跳转

模块内页面路由

Index.ets跟页面代码：

  @Entry
  @Component
  struct Index {
   
   
  /**
   * 创建一个页面栈对象
   */
  pathStack: NavPathStack = new NavPathStack()

    build() {
   
   
      Navigation(this.pathStack) {
   
   
        Column() {
   
   
          Text("这是一个test Navigation Page的例子")

          Button("点击跳转").onClick((event: ClickEvent) => {
   
   

          })

        }
        .height('100%')
        .width('100%')
      }
      .title('Navigation Main Page')
    }
  }

系统路由表

系统路由表的方式，不需要引入子页面的ets文件，解除了各个页面之间的耦合；此外路由跳转通过配置文件配置方式实现，降低了代码的复杂度。建议使用系统路由表的方式实现页面的跳转。

测试页代码

PageOne.ets测试页的代码：

@Builder
export function PageOneBuilder() {
   
   
  PageOne()
}
@Component
struct PageOne {
   
   
  pathStack: NavPathStack = new NavPathStack();

  build() {
   
   
    NavDestination() {
   
   
      Column() {
   
   
        Text("PageOne Test")
      }
    }
    .title("PageOne")
    .onReady((context: NavDestinationContext) => {
   
   
     this.pathStack = context.pathStack;
    })
  }
}

创建并配置路由表文件

我们需要配置系统路由表， 在resource/base/profile目录下创建一个路由的配置文件：

其内容如下：

{
   
   
  "routerMap": [
    {
   
   
      "name": "PageOne",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "PageOneBuilder",
      "data": {
   
   
        "des": "传递的参数"
      }
    }
  ]
}

配置创建好的路由表文件

然后需要再module.json5的配置文件中的module标签中定义routeMap字段, 指向定义好的路由表配置文件route_map.json

跳转页面

  Button("点击跳转").onClick((event: ClickEvent) => {
   
   
   // 名称是路由表注册的名称         
   this.pathStack.pushPathByName("PageOne", null, false)
          })

自定义路由表

我们需要修改Index.ets文件内容如下：

import {
   
    PageTwo } from './PageTwo'

@Entry
@Component
struct Index {
   
   
  /**
   * 创建一个页面栈对象
   */
  pathStack: NavPathStack = new NavPathStack()

  @Builder
  pageMap(pageName: string, param