harmonyOS 5.0 API 12 里面的路由简单介绍

前言

使用 页面路由router

// entry/src/main/module.json5


{
  "module": {
    "name": "entry",
    "type": "entry",
    "pages": "$profile:main_pages",
    "routerMap": "$profile:route_maps"
  }
}

// /api12-learn/system_route/entry/src/main/resources/base/profile/main_pages.json

{
  "src": [
    "pages/Index"
  ]
}

使用 Navigation系统路由

// entry/src/main/module.json5


{
  "module": {
    "name": "entry",
    "type": "entry",
    "pages": "$profile:main_pages",
    "routerMap": "$profile:route_maps"
  }
}

// /api12-learn/system_route/entry/src/main/resources/base/profile/router_maps.json

{
  "routerMap": [
    {
      "name": "PageSecond",
      "pageSourceFile": "src/main/ets/pages/PageSecond.ets",
      "buildFunction": "PageSecondBuilder",
      "data": {
        "description": "this is page second"
      }
    }
  ]
}

// /system_route/entry/oh-package.json5
{
  "name": "entry",
  "version": "1.0.0",
  "description": "Please describe the basic information.",
  "main": "",
  "author": "",
  "license": "",
  "dependencies": {
    "har_a": "../har_a",
    "hsp_a": "../hsp_a"
  }
}

@Styles
function btnW() {
  .width('100%')
  .height(40)
  .margin({
    bottom: 20
  })
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World ftf';
  pageInfos: NavPathStack = new NavPathStack()

  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button("to page Second")
          .btnW()
          .onClick(() => {
            console.log('ftf click')
            this.pageInfos.pushPathByName("PageSecond", null)
          })
        Button("to feature a page one")
          .btnW()
          .onClick(() => {
            console.log('ftf click')
            this.pageInfos.pushPathByName("featureAPageOne", null)
          })
        Button("to harPageOne")
          .btnW()
          .onClick(() => {
            this.pageInfos.pushPathByName("harPageOne", null)
          })
        Button("to hspPageOne")
          .btnW()
          .onClick(() => {
            this.pageInfos.pushPathByName("hspPageOne", null)
          })
        // Button()
        //   .btnW()
        //   .onClick(() => {
        //
        //   })
        // Button()
        //   .btnW()
        //   .onClick(() => {
        //
        //   })
        // Button()
        //   .btnW()
        //   .onClick(() => {
        //
        //   })
      }
      .height('100%')
      .width('100%')
    }
  }
}

@Builder
export function PageSecondBuilder(name: string, param: Object){
  PageSecond()
}

@Component
export struct PageSecond {
  @State message: string = 'Page Second Hello World';
  pageInfos: NavPathStack = new NavPathStack()

  build() {
    NavDestination(){
      RelativeContainer() {
        Text(this.message)
          .id('PageSecondHelloWorld')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .alignRules({
            center: { anchor: '__container__', align: VerticalAlign.Center },
            middle: { anchor: '__container__', align: HorizontalAlign.Center }
          })
      }
      .height('100%')
      .width('100%')
    }
    .onReady((context: NavDestinationContext) => {
      this.pageInfos = context.pathStack
    })
  }
}

两种路由

构建丰富的页面

Navigation系统路由

华为开发者联盟

下载中心

开发者文档

HarmonyOS 第一课