鸿蒙开发（API12）通过组件导航Navigation配合NavPathStack实现页面路由

Navigation是路由容器组件，一般作为首页的根容器，包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。Navigation组件适用于模块内和跨模块的路由切换，一次开发，多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。在不同尺寸的设备上，Navigation组件能够自适应显示大小，自动切换分栏展示效果。

Navigation组件主要包含​导航页(NavBar)和子页(NavDestination)。导航页由标题栏(Titlebar，包含菜单栏menu)、内容区(Navigation子组件)和工具栏(Toolbar)组成，其中导航页可以通过hideNavBar属性进行隐藏，导航页不存在页面栈中，导航页和子页，以及子页之间可以通过路由操作进行切换。

在API Version 9上，需要配合NavRouter组件实现页面路由，从API Version 10开始，推荐使用NavPathStack实现页面路由。

本篇文章只讲解Navigation通过NavPathStack进行跳转

导航页（也就是首页）用Navigation作为根布局，子页面（要跳转的目标页面）用 NavDestination作为根布局

首页中的Navigation（）需要绑定NavPathStack栈

//主页面（PageOne）
//栈对象，通过Nav栈进行跳转
pageInfos: NavPathStack = new NavPathStack()

Navigation(this.pageInfos) {
  ...
  Button()
    .onClick(() => {
       //点击按钮,将PageTwo页面入栈并进行跳转
       this.pageInfos.pushPath({ name: 'pageTwo' }) 
     })
}
//隐藏标题栏
.hideTitleBar()



//子页面（PageTwo）
NavDestination() {
  ...
}

在跳转之前需要在app/entry/src/main/resources/base/profile中新建文件route_map.json文件名可以随意，在文件中对子页面进行注册，并在PageTwo文件中写一个builder方法，最后在app/entry/src/main/module.json5，module.json5中绑定route_map.json,最后可以完成跳转

//route_map.json
{
  "routerMap": [
    {
      //该name是跳转时pushpath里面传的name
      "name": "pageTwo",

      //PageTwo页面路径，只支持src/main开头
      "pageSourceFile": "src/main/ets/pages/PageTwo.ets",

      //PageTwo页面中的build方法
      "buildFunction": "PageTwoBuilder"
    }
  ]
}



//pageTwo.ets
//此处的方法名与上方json文件方法名一致
@Builder
export function PageTwoBuilder(name: string, param: Object) {
  PageTwo()
}

@Entry
@Component
export struct PageTwo {
    ...
}


//module.json5

{
  "module": {

      "routerMap": "$profile:route_map"

   }
}

 在我们从PageOne页面跳转到PageTwo页面之后，我们要将PageOne中的NavPathStack对象传递给PageTwo，以保证主页面与子页面是同一栈，也方便PageTwo以后跳转到PageThree

//PageTwo.ets
@Entry
@Component
export struct PageTwo {
  nav : NavPathStack = new NavPathStack()
  build(){
    NavDestination(){
        ...
    }.onReady((context: NavDestinationContext) => {
      //将上个页面的NavPathStack对象赋值给当前页面
      this.nav = context.pathStack
    })
  }
}

提示主页面是无法入栈的,只能主页面跳子页面或者子页面之间互相跳转 

具体的其他跳转Api以及传值在这里就不概括了，具体可以参考华为官方文档进行开发Navigation-基础组件-ArkTS组件-ArkUI（方舟UI框架）-应用框架 | 华为开发者联盟 (huawei.com)