【鸿蒙实战开发】基于Navigation的路由管理

Navigation先容

Navigation简介

  

• Navigation：路由导航的根视图容器，一样平常作为页面（@Entry）的根容器去利用，包罗单页面（stack）、分栏（split）和自顺应（auto）三种表现模式。Navigation组件实用于模块内和跨模块的路由切换，通过组件级路由本领实现更加天然流通的转场体验，并提供多种标题栏样式来出现更好的标题和内容联动效果。一次开发，多端摆设场景下，Navigation组件可以大概自动适配窗口表现巨细，在窗口较大的场景下自动切换分栏展示效果。
  

  

• Title：标题栏，通过title属性对标题栏举行设置。通过menus设置菜单  
  
• NavContent：内容地区，默认首页表现导航内容（Navigation的子组件）或非首页表现（NavDestination的子组件），首页和非首页通过路由举行切换。  
  
• ToolBar：工具栏，通过toolbarConfiguration实现对工具栏的设置，假如不设置此属性，ToolBar不表现。竖屏最多支持表现5个图标，多余的图标会被放入自动天生的更多图标。  
  
• NavDestination：作为子页面的根容器，用于表现Navigation的内容区。具备两种范例：STANDARD（标准范例，NavDestination的生命周期跟随NavPathStack栈中标准NavDestination厘革而改变），DIALOG（默认透明。不影响其他NavDestination的生命周期）。  
  
• NavPathStack：Navigation路由栈，由于管理NavDestination组件的路由跳转。保举利用NavPathStack共同navDestination****属性举行页面路由。
  

Navigation路由页面生命周期简介

Navigation由NavDestination组件构成页面路由，在实现过程中NavDestination组件会被封装在一个自界说组件中，从而作为一个页面被路由栈利用。当前支持的生命周期函数：aboutToAppear、onReady、onAppear、onShow、onHide、onDisappear、aboutToDisappear 、onWillAppear、onWillDisappear

     事故名称    形貌              aboutToAppear    自界说组件析构烧毁之前实行。          onAppear    组件挂载表现时触发此回调。          onReady    当NavDestination即将构建子组件之前会触发此回调。          onShown    当该NavDestination页面表现时触发此回调。          onHidden    当该NavDestination页面潜伏时触发此回调。          onDisAppear    组件卸载消散时触发此回调。          aboutToDisappear    在自界说组件析构烧毁之前实行。    Navigation VS Router

当前HarmonyOS支持两套路由机制（Navigation和Router），Navigation作为后续长期演进及保举的路由选择方案，其与Router比力的上风如下：

  

• 易用性层面：
  

  

• Navigation天然具备标题、内容、回退按钮的功能联动，开发者可以直接利用此本领。Router若要实现此本领，必要自行界说；  
  
• Navigation的页面是由组件构成，易于实现共享元素的转场。
  

  

• 功能层面：
  

  

• Navigation天然支持一多，Router不支持；  
  
• Navigation没有路由数量限定，Router限定32个；  
  
• Navigation可以获取到路由栈NavPathStack，并对路由栈举行操纵；  
  
• Navigation可以嵌套在模态对话框中，也就是说可以模态框中界说路由，Router不支持；  
  
• Navigation的组件全量由开发者自行控制，开发者可以自界说复杂的动效和属性的设置（配景、含糊等），Router的page对象不对外袒露，开发者无法对page举行处理惩罚。
  

  

• 性能层面
  

  

• Navigation转达参数性能更优，Navigation通过引用转达，Router通过深拷贝完成；  
  
• Navigation可以共同动态加载，实现组件动态加载，Router页面利用@Entry举行修饰，当前模块加载时会生玉成量页面。
  

Navigation & Router****布局对比

  

• Navigation中的每个页面，承载在一个page里，通过NavDestination容器实现基于组件的页面跳转。  
  
• Router的每一个页面设置在一个单独的page中，通过@Entry举行标识。
  

Navigation & Router****本领对比
     业务场景    Navigation本领    Router本领              跳转指定页面    pushPath & pushDestination    pushUrl & pushNameRouter          跳转HSP中页面    支持，必要先import页面    支持          跳转HAR中页面    支持，必要先import页面    支持          跳转传参    支持    支持          获取指定页面参数    支持    不支持          跳转效果回调    支持    支持          跳转单例页面    可通过判断栈内有没有此页面，调用moveToTop实现    支持          页面返回    pop    back          页面返回传参    支持    支持          返回指定路由    popToName&popToIndex    不支持          页面返回弹窗    通过路由拦截实现    showAlertBeforeBackPage          路由更换    replacePath & replacePathByName    replaceUrl & replaceNameRouter          路由栈整理    clear    clear          整理指定路由    removeByIndexes & removeByName    不支持          转场动画    支持    支持          自界说转场动画    支持    支持          屏蔽转场动画    pushDestination(info: NavPathInfo, animated?: boolean) & patshStack.disableAnimation（true）    支持 duration属性设置为0          共享元素动画    支持    不支持          页面生命周期监听    UIObserver.on(‘navDestinationUpdate’)    UIObserver.on(‘routerPageUpdate’)          获取页面栈对象    支持    不支持          路由拦截    setInterception    不支持          路由栈信息查询    getAllPathName & getParamByIndex & getParamByName&size    getState() & getLength()          路由栈操纵    moveToTop & moveIndexToTop    不支持          陶醉式页面    支持    不支持，需通过window设置          设置页面属性（配景，含糊等）    支持，backgroundBlurStyle    不支持          设置页面标题栏（title）和工具栏（toolbar）    支持    不支持          模态嵌套路由    支持    不支持    Navigation常见场景&办理方案

路由跳转场景
页面跳转是路由最常用的本领，Navigation通过NavPathStack提供了诸多方法，下文以pushDestination方法为例，先容Navigation的路由跳转干系本领。
页面间跳转
NavPathStack提供了路由管理的本领，通过NavPathStack举行页面跳转，重要实用于页面较多的应用。
Step1：创建NavPathStack对象pageStack，通常利用@Provide举行修饰，方便后续子组件通过@Consumer获取，以实现子页面的路由跳转。也可以将pageStack传入路由框架，以实现路由框架开发（后续路由框架章节会先容）的开发

1. @Entry
3. @Component
5. struct mainPageView {
7.   @Provide('pageStack') pageStack: NavPathStack = new NavPathStack()
9.   ...
11.   build() {
13.     ...
15.   }
17. }

复制代码

Step2：构建路由表pageMap，该方法通过@Builder举行修饰，通过传入的pageName属性，返回差别页面。

1. @Entry
3. @Component
5. struct mainPageView {
7.   @Provide('pageStack') pageStack: NavPathStack = new NavPathStack()
9.   @Builder
11.   PageMap(pageName: string) {
13.     if (pageName === 'loginPage') {
15.       loginPageView()
17.     } else if (pageName === 'mainPage') {
19.       mainPageView()
21.     }
23.   }
25.   build() {
27.     ...
29.   }
31. }

复制代码

Step3：在build创建Navigation组件（必要传入pageStack参数），通过navDestination属性传入路由表pageMap，并通过pageStack.pushPath()实现页面跳转。

1. @Entry
3. @Component
5. struct mainPageView {
7.   @Provide('pageStack') pageStack: NavPathStack = new NavPathStack()
9.   @Builder
11.   pageMap(pageName: string) {
13.     if (pageName === 'loginPage') {
15.       loginPageView()
17.     } else if (pageName === 'mainPage') {
19.       mainPageView()
21.     }
23.   }
25.   build() {
27.     Navigation(this.pageStack){
29.       ...
31.       Button('login').onClick( ent => {
33.         let pathInfo : NavPathInfo = new NavPathInfo('loginPage', null)
35.         this.pageStack.pushDestination(pathInfo, true);
37.       })
39.     }.navDestination(this.pageMap)
41.     ...
43.   }
45. }

复制代码

页面间参数转达
Navigation的页面间，通过NavPathInfo对象中的params属性，实现从发起页到目的页的数据转达；通过onPop回调参数，实现处理惩罚目的页面的返回。
Step1：构建NavPathInfo对象，输入必要转达给目的页面的参数。params参数：将必要转达的数据封装起来举行转达。onPop参数：目的页面触发pop时的返回，在回调中通过PopInfo.info.param获取到返回的对象。

1. // 发起页 mainPage
3. let loginParam : LoginParam = new LoginParam()
5. // 构建pathInfo对象
7. let pathInfo : NavPathInfo = new NavPathInfo('loginPage', loginParam
9.   , (popInfo: PopInfo) => {
11.     let loginParam : LoginParam = popInfo.info.param as LoginParam;
13.     ...
15.   })
17. // 讲参数传递到目标页
19. this.pageStack.pushDestination(pathInfo, true);    

复制代码

Step2：目的页面在NavDestination的onReady函数中，通过通过cxt.pathInfo.param，获取转达过来的参数。

1. build() {
3.   NavDestination(){
5.     ...
7.   }.hideTitleBar(true)
9.   .onReady(cxt => {
11.     this.loginParam = cxt.pathInfo.param as LoginParam;
13.     ...
15.   })
17. }

复制代码

Step3：目的页通过NavPathStack.pop方法返回起始页，其result参数用来转达必要返回给起始页的对象。

1. @Component

复制代码