02Navigation页面路由

ShuiShenHuoLe2026-03-28 11:49

在前面的文章中我们介绍了navigation的使用接下来我们体验一下如何使用子页面

在entry页面中创建页面控制器

在子页面我们也需要传入控制器进行页面的操作我们使用provider进行注入

我们获取路由栈的方式有三种甚至更多可以在下面补充先使用provider

ts 复制代码

@Entry
@ComponentV2
struct Index {
  // 控制器
@Provider('nav') nav:NavPathStack = new NavPathStack()
  build() {
    Navigation(this.nav) {}
  }
}

创建子页面

为每个NavDestination声明对外的实例化方法，如代码中的helloBuilder，执行该方法会创建一个hello的自定义组件，该组件就是一个Navigation的子页面。

ts 复制代码

@Builder
function helloBuilder(){
  hello()
}

@ComponentV2
export struct hello{
  build() {
    NavDestination(){
      Text("HelloView")
    }
       .title("Hello")
      //  当然NavDestination也支持指定title
  }
}

配置路由表

第一次需要在models.json5配置

json 复制代码

{
  "routerMap": "$profile:router_map"
}

创建文件并且配置如下

src/main/resources/base/profile/router_map.json

json 复制代码

{
  "routerMap": [
    {
      "pageSourceFile": "src/main/ets/pages/hello.ets", // 源码所在路径
      "name": "hello", // 路由页面的唯一标识符
      "buildFunction": "helloBuilder" //页面的实例化方法名称
    }
  ]
}

感受一下跳转

在entry页面加入如下代码会跳转到hello页面

ts 复制代码

Button("to hello").onClick((event: ClickEvent) => {
  this.nav.pushPathByName("hello", null);
});

子页面改造如下

ts 复制代码

@Builder
function helloBuilder(){
  hello()
}

@ComponentV2
export struct hello{
    //获取路由栈控制器
  @Consumer('nav') nav:NavPathStack = new NavPathStack()
  build() {
    NavDestination(){
      Text("HelloView")
      Button('pop')
        .onClick((event: ClickEvent) => {
            // 调用返回栈函数
          this.nav.pop()
      })
    }
  }
}

注意如果没有传入页面栈控制器子路由则无法返回