navigation路由导航实践

**官方文档：**

[https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-navigation-V5](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-navigation-V5)

组件导航（Navigation）和页面路由（@ohos.router）均支持应用内的页面跳转，但组件导航支持在组件内部进行跳转，使用更灵活。组件导航具备更强的一次开发多端部署能力，可以进行更加灵活的页面栈操作，同时支持更丰富的动效和生命周期。因此，推荐使用组件导航（Navigation）来实现页面跳转以及组件内的跳转，以获得更佳的使用体验

Navigation的这种设计上有如下优势：

1. 接口上显式区分标题栏、内容区和工具栏，实现更加灵活的管理和UX动效能力；
2. 显式提供路由容器概念，由开发者决定路由容器的位置，支持在全模态、半模态、弹窗中显示；
3. 整合UX设计和一多能力，默认提供统一的标题显示、页面切换和单双栏适配能力；
4. 基于通用UIBuilder能力，由开发者决定页面别名和页面UI对应关系，提供更加灵活的页面配置能力；
5. 基于组件属性动效和共享元素动效能力，将页面切换动效转换为组件属性动效实现，提供更加丰富和灵活的切换动效；
6. 开放了页面栈对象，开发者可以继承，能更好的管理页面显示。

业务场景	Navigation	Router
一多能力	支持，Auto模式自适应单栏跟双栏显示	不支持
跳转指定页面	pushPath & pushDestination	pushUrl & pushNameRoute
跳转HSP中页面	支持	支持
跳转HAR中页面	支持	支持
跳转传参	支持	支持
获取指定页面参数	支持	不支持
传参类型	传参为对象形式	传参为对象形式，对象中暂不支持方法变量
跳转结果回调	支持	支持
跳转单例页面	支持	支持
页面返回	支持	支持
页面返回传参	支持	支持
返回指定路由	支持	支持
页面返回弹窗	支持，通过路由拦截实现	showAlertBeforeBackPage
路由替换	replacePath & replacePathByName	replaceUrl & replaceNameRoute
路由栈清理	clear	clear
清理指定路由	removeByIndexes & removeByName	不支持
转场动画	支持	支持
自定义转场动画	支持	支持，动画类型受限
屏蔽转场动画	支持全局和单次	支持 设置pageTransition方法duration为0
geometryTransition共享元素动画	支持（NavDestination之间共享）	不支持
页面生命周期监听	UIObserver.on(‘navDestinationUpdate’)	UIObserver.on(‘routerPageUpdate’)
获取页面栈对象	支持	不支持
路由拦截	支持通过setInterception做路由拦截	不支持
路由栈信息查询	支持	getState() & getLength()
路由栈move操作	moveToTop & moveIndexToTop	不支持
沉浸式页面	支持	不支持，需通过window配置
设置页面标题栏（titlebar）和工具栏（toolbar）	支持	不支持
模态嵌套路由	支持	不支持

**效果：**


代码示例：

```typescript import { promptAction } from "@kit.ArkUI";

@Entry
@Component
struct NavigationExample {
@State TooTmp: ToolbarItem = {
‘value’: “func”, ‘icon’: $r(‘app.media.setting’), ‘action’: () => {
}
}
@Provide(‘pageInfos’) pageInfos: NavPathStack = new NavPathStack()
private arr: number[] = [1, 2, 3, 4, 5];

@Builder
PageMap(name: string) {
if (name === “NavDestinationTitle1”) {
pageOneTmp()
} else if (name === “NavDestinationTitle2”) {
pageTwoTmp()
} else if (name === “NavDestinationTitle3”) {
pageThreeTmp()
} else if (name === “NavDestinationTitle4”) {
pageFourTmp()
} else if (name === “NavDestinationTitle5”) {
pageFiveTmp()
}

}

build() {
Column() {
Navigation(this.pageInfos) {
TextInput({ placeholder: ‘search…’ })
.width(“90%”)
.height(40)
.backgroundColor(‘#FFFFFF’)

    List({ space: 12 }) {
      ForEach(this.arr, (item: number) => {
        ListItem() {
          Text("Page" + item)
            .width("100%")
            .height(72)
            .backgroundColor('#FFFFFF')
            .borderRadius(24)
            .fontSize(16)
            .fontWeight(500)
            .textAlign(TextAlign.Center)
            .onClick(() => {
              this.pageInfos.pushPath({ name: "NavDestinationTitle" + item })
            })
        }
      }, (item: number) => item.toString())
    }
    .width("90%")
    .margin({ top: 12 })
  }
  .title("主标题")
  .mode(NavigationMode.Stack)
  .navDestination(this.PageMap)
  .menus([
    {
      //https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-graphics-display-V5
      // Image组件引入本地图片路径，即可显示图片（根目录为ets文件夹）。
      value: "", icon: "image/setting.svg", action: () => {
      promptAction.showToast({ message: '你好' })
    }
    }
  ])
  .toolbarConfiguration([this.TooTmp, this.TooTmp, this.TooTmp, this.TooTmp, this.TooTmp])
}
.height('100%')
.width('100%')
.backgroundColor('#F1F3F5')

}
}

// PageOne.ets
@Component
export struct pageOneTmp {
@Consume(‘pageInfos’) pageInfos: NavPathStack;

build() {
NavDestination() {
Column() {
Text(“NavDestinationContent1”)
}.width(‘100%’).height(‘100%’)
}.title(“NavDestinationTitle1”)
.onBackPressed(() => {
const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素
console.log(‘pop’ + ‘返回值’ + JSON.stringify(popDestinationInfo))
return true
})
}
}

// PageTwo.ets
@Component
export struct pageTwoTmp {
@Consume(‘pageInfos’) pageInfos: NavPathStack;

build() {
NavDestination() {
Column() {
Text(“NavDestinationContent2”)
}.width(‘100%’).height(‘100%’)
}.title(“NavDestinationTitle2”)
.onBackPressed(() => {
const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素
console.log(‘pop’ + ‘返回值’ + JSON.stringify(popDestinationInfo))
return true
})
}
}

// PageThree.ets
@Component
export struct pageThreeTmp {
@Consume(‘pageInfos’) pageInfos: NavPathStack;

build() {
NavDestination() {
Column() {
Text(“NavDestinationContent3”)
}.width(‘100%’).height(‘100%’)
}.title(“NavDestinationTitle3”)
.onBackPressed(() => {
const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素
console.log(‘pop’ + ‘返回值’ + JSON.stringify(popDestinationInfo))
return true
})
}
}

@Component
export struct pageFourTmp {
@Consume(‘pageInfos’) pageInfos: NavPathStack;

build() {
NavDestination() {
Column() {
Text(“NavDestinationContent4”)
}.width(‘100%’).height(‘100%’)
}.title(“NavDestinationTitle4”)
.onBackPressed(() => {
const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素
console.log(‘pop’ + ‘返回值’ + JSON.stringify(popDestinationInfo))
return true
})
}
}

@Component
export struct pageFiveTmp {
@Consume(‘pageInfos’) pageInfos: NavPathStack;

build() {
NavDestination() {
Column() {
Text(“NavDestinationContent5”)
}.width(‘100%’).height(‘100%’)
}.title(“NavDestinationTitle5”)
.onBackPressed(() => {
const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素
console.log(‘pop’ + ‘返回值’ + JSON.stringify(popDestinationInfo))
return true
})
}
}