跳到主要内容

04Navigation跳转

Navigation跳转

需求：由Index页面跳转到Home页面/组件

bug点：API19版本中，需要使用模拟器完成本案例。预览器不支持。其他版本同学们自行测试预览器是否支持。

跳转页Index（源页面）​

1-Navigation组件​

必须使用Navigation作为根容器组件。

@Entry
@Component
struct Index {
  build() {
    Navigation() {
      Button('点击跳转Home组件')
    }
    .width('100%')
    .height('100%')
  }
}

2- NavPathStack 对象​

需要在源页面中设置 NavPathStack 对象

  pagePath:NavPathStack = new NavPathStack()

3-关联​

需要将该 NavPathStack 对象跟Navigation组件关联起来

 pagePath:NavPathStack = new NavPathStack()
 
 Navigation(this.pagePath){
      
    }

4-跳转页面​

下面的跳转功能代码，name属性对应的配置值，还没写呢，此处是伪代码。

  Button('点击跳转Home组件')
        .onClick(() => {
          this.pagePath.pushPath({name:"目标页面的配置名称后续回来补上？？？？"})
        })

目标页面Home，​

1-NavDestination组件​

必须使用NavDestination作为根容器组件。

@Component
struct Home {
  build() {
    NavDestination(){
      Column({ space: 30 }) {
        Text('Home组件效果')
      }
      .width('100%')
      .height('100%')
    }
  }
}

2-入口函数​

需要一个入口函数，方便在后续的配置文件中使用。该函数在组件之外的位置。可以写在当前文件的第一行。

@Builder
export function homeBuilder(){
  Home()
}

配置文件​

设置配置文件，源页面的name值和目标页面的路径，均需要由配置文件关联。

1 - module.json5配置文件​

找到src/main/module.json5配置文件，未修改前的默认样子如下

module.json5修改之前

2 - 添加 routerMap配置项​

追加配置项："routerMap": "$profile:route_map"。追加好后的样子如下图：

module.json5修改之后

3 - 创建route_map.json​

在src/main/resources/base/profile目录下创建route_map.json

4 - 在route_map.json 中添加配置项如下​

{
  "routerMap": [
    {
      "name": "Home",
      "pageSourceFile": "src/main/ets/view/Home.ets",
      "buildFunction": "homeBuilder"
    }
  ]
}

Home文件与配置项的关系

页面文件代码最终效果​

1 - Index完整代码​

@Entry
@Component
struct Index {
  pagePath:NavPathStack = new NavPathStack()
  build() {
    Navigation(this.pagePath) {
      Button('点击跳转Home组件')
        .onClick(() => {
          this.pagePath.pushPath({name:"Home"})
        })
    }
    .width('100%')
    .height('100%')
  }
}

2 - Home完整代码​

@Builder
export function homeBuilder(){
  Home()
}

@Component
struct Home {
  build() {
    NavDestination(){
      Column({ space: 30 }) {
        Text('Home组件效果')
      }
      .width('100%')
      .height('100%')
    }
    .hideBackButton(true)  // 取消 NavDestination 默认的返回箭头
  }
}