鸿蒙Next开发，配置Navigation的Route

赵健zj2025-07-15 13:13

1. 通过router_map.json配置文件进行

创建页面
配置router_map.json

typescript 复制代码

{
  "routerMap": [
    {
      "name": "StateExamplePage",
      "pageSourceFile": "src/main/ets/pages/state/StateExamplePage.ets",
      "buildFunction": "PageBuilder"
    },
    ......
}

跳转

2. 使用pageBuilder()方法进行

创建三个页面

typescript 复制代码

@Component
export struct pageOneTmp {}
@Component
export struct pageTwoTmp {}
@Component
export struct pageThreeTmp {}

创建PageMap函数

ts 复制代码

  @Builder
  PageMap(name: string) {
    if (name === "NavDestinationTitle1") {
      pageOneTmp()
    } else if (name === "NavDestinationTitle2") {
      pageTwoTmp()
    } else if (name === "NavDestinationTitle3") {
      pageThreeTmp()
    }
  }

Navigation使用PageMap函数

typescript 复制代码

  Navigation(this.pageInfos) {
  }
  .title("主标题")
  .mode(NavigationMode.Split)
  .navDestination(this.PageMap)

跳转

typescript 复制代码

this.pageInfos.pushPath({ name: "NavDestinationTitle1" })
this.pageInfos.pushPath({ name: "NavDestinationTitle2" })
this.pageInfos.pushPath({ name: "NavDestinationTitle3" })