Harmony 页面路由基本设置

1 main_pages.json

个人理解 main_pages.json 主要用来声明程序的入口文件。

在main_pages.json 中声明的页面需要添加 @Entry注解。

2 我的应用router/index.ets是程序主入口。在主入口中使用 Navigation 开启路由功能。 页面跳转通过NavPathStack对应的api操作。

3 添加router_map.json文件。（名字其实随意，只要注册的时候引用正确就行）

router_map.json内容格式如下

{
  "routerMap": [
    {
      "name": "Goods", //页面跳转使用的name
      "pageSourceFile": "src/main/ets/router/Goods.ets",
      "buildFunction": "GoodsBuilder" //声明如何创建对应的页面（对应Goods.ets文件中的GoodsBuilder()方法）
    }
  ]
}

Goods.ets 内容如下

@Builder
export function GoodsBuilder() {
  Goods()
}

@Component
struct  Goods {
  pageStack: NavPathStack = new NavPathStack()
  build() {
    NavDestination(){
      Stack(){
        Text('Goods')
          .fontColor(Color.Black)
      }
      .backgroundColor(Color.White)
      .alignContent(Alignment.Center)
      .width('100%')
      .height('100%')
    }
    .hideTitleBar(true)
    .onReady((context)=>{
      this.pageStack = context.pathStack;
    })
  }
}

页面内容需要使用NavDestination包裹。并且在onReady方法中可以拿到NavPathStack。

4 注册router_map.json

5 路由跳转

this.pageStack.pushPath({name:"Goods"})