Naviagtion 用法

Navigation 官方推荐的打开新页面的组件

具体用法

在导航页添加Navigation 目标也添加NavDestination

@Entry
@Component
struct Index {

     pathStack:NavPathStack = new NavPathStack()
   build() {
    Navigation(this.pathStack){
      Column() {
       Button('跳转导航')
           .onClick(() => {
            this.navPageStack?.pushPathByName("TaskManagePage", null, 
 false)
          }
      }
      .width('100%')
      .height('100%')
    }

  }
}

配置目标路由

在module.json5配置路由信息

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "routerMap": "$profile:router_map",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet",
      "2in1"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:layered_image",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:startIcon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ],
    "extensionAbilities": [
      {
        "name": "EntryBackupAbility",
        "srcEntry": "./ets/entrybackupability/EntryBackupAbility.ets",
        "type": "backup",
        "exported": false,
        "metadata": [
          {
            "name": "ohos.extension.backup",
            "resource": "$profile:backup_config"
          }
        ],
      }
    ]
  }
}

  {
  "routerMap": [
    {
      "name": "TaskManagePage",
      "pageSourceFile": "src/main/ets/pages/TaskManagePage.ets",
      "buildFunction": "TaskManageBuilder",
      "data": {
        "description": "this is task manager"
      }
    }
  ]
}

目标页代码设置如下

@Builder
export function TaskManageBuilder() {
  TaskManagePage()
}


@Entry
@Component
struct TaskManagePage {

  navPathStack:NavPathStack = new NavPathStack()
  build() {
    NavDestination(){
      Column(){
        // 1. 顶部导航
        Header()
        // 2.任务进度卡片
        TaskStatistics({totalTask: this.totalTask, finishTask: this.finishTask})
      }
      .height('100%')
      .width('100%')
      .backgroundColor('#F1F2F3')
    }
    .onReady((context:NavDestinationContext) => {
        this.navPathStack = context.pathStack
    })

  }
}

如此设置，才能实现跳转到指定页面，这是在学习鸿蒙开发中的一点心得，与诸位共勉，希望能帮助需要的你