【页面路由导航】三步实现页面跳转的完整示例

Navigation是路由容器组件，一般作为首页的根容器。Navigation组件适用于模块内和跨模块的路由切换，一次开发，多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。

Navigation组件主要包含导航栏（NavBar）和子页（NavDestination），子页通过栈结构管理（存在NavPathStack中）。

通过Navigation组件实现页面之间的跳转，主要分为三步

第一步：导航页面（主页面）如下

less 复制代码

@Entry
@Component
struct Index {
  // 创建NavPathStack管理导航栈
  pageStack: NavPathStack = new NavPathStack();
  build() {
    // 在Navigation容器中实现主页面的内容
    Navigation(this.pageStack) {
      Column() {
        // 父视图实现，打开子视图，并传参数
        Button('nav pushPath SecondPage_Nav')
          .onClick(() => {
            this.pageStack.pushPathByName('secondPageNav' , null); // 'secondPageNav'在第三步中定义
          })
      }
    }
    .hideTitleBar(true)
  }
}

第二步：实现子页面

scss 复制代码

@Builder
export function SecondPageBuilder(name: string, param: Object) {
  SecondPage_Nav()
}

@Entry
@Component
struct SecondPage_Nav {
  pageStack:NavPathStack|null = null;
  build() {
    NavDestination() {
      Button('nav pop Parent')
        .onClick(() => {
          this.pageStack!!.pop()
        })
    }
    .onReady((context: NavDestinationContext) => {
      this.pageStack = context.pathStack;  // 记录上级页面的pageStack
    })
  }
}

第三步：配置路由表

Navigation支持使用系统路由表的方式进行动态路由。各业务模块中需要独立配置route_map.json文件，在触发路由跳转时，需要通过NavPathStack提供的路由方法，传入需要路由的页面配置名称。

resources/base/profile/route_map.json 文件

perl 复制代码

{
  "routerMap": [
    {
      "name": "secondPageNav",                                   // 主页面跳转子页面时使用
      "pageSourceFile": "src/main/ets/pages/SecondPage_Nav.ets", // 子页面的源代码文件
      "buildFunction": "SecondPageBuilder",    // 需要与子页面的实现 @Builder描述的export function 名一样。
      "data": {
        "description": "this is pageTwo"
      }
    }
  ]
}

注意：新建的工程，默认没有配置route_map.json文件，需要在在跳转目标模块（子页面）的module.json5配置文件中添加路由表配置

// module.json5

bash 复制代码

{
  "module" : {
    "routerMap": "$profile:route_map"
  }
}

这三步完成后，通过页面路由导航实现页面跳转的主体代码及配置已经完成。