鸿蒙开发逐个击破系列——组件导航 (Navigation)(推荐)和页面路由 (@ohos.router)

小白学鸿蒙

于 2024-08-12 00:12:34 发布

阅读量1k

点赞数 25

分类专栏：鸿蒙开发重点-逐个击破 HarmonyOS从入门到头秃文章标签： harmonyos 华为鸿蒙鸿蒙系统

本文链接：https://blog.csdn.net/qq_44160056/article/details/141113085

版权

系列文章目录

文章目录

系列文章目录
前言
常见问题
- router和Navigation的技术选择、推荐使用场景和演进策略是什么？
- Navigation与Router对比和如何进行选择（总结：推荐Navigation）
组件导航 (Navigation)(推荐)
总结

前言

提示：以下是本篇文章正文内容，下面案例可供参考

常见问题

router和Navigation的技术选择、推荐使用场景和演进策略是什么？

在不涉及复杂动效、交互、多级路由等场景时，可以使用router。

但考虑到应用当前或以后可能出现的复杂场景，以及整体交互体验的一致，推荐使用Navigation，Navigation可以完全替换router的能力。

后续router的策略是不演进，但现有能力会继续维护。后续对路由能力的增强需求在Navigation上持续构建。

Navigation与Router对比和如何进行选择（总结：推荐Navigation）

当前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即可。

如果项目包含模块，比如项目有主项目，A、B模块，主项目的H界面要跳转到A模块的I界面，或者A模块的I界面要跳转到B模块的J界面，这个时候就要用router。但是主项目里的M界面跳转主项目里的N界面，或者A模块的O界面跳转B模块的P界面，这种属于模块内，可以用Navgation。

组件导航 (Navigation)(推荐)

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

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

从API Version 10开始，推荐使用 NavPathStack 实现页面路由。
在这里插入图片描述

设置页面显示模式

Navigation组件通过mode属性设置页面的显示模式。

自适应模式

Navigation组件默认为自适应模式，此时mode属性为NavigationMode.Auto。自适应模式下，当页面宽度大于等于一定阈值( API version 10及以后：600vp )时，Navigation组件采用分栏模式，反之采用单栏模式。

Navigation() {
   
  ...
}
.mode(NavigationMode.Auto)

单页面模式

将mode属性设置为NavigationMode.Stack，Navigation组件即可设置为单页面显示模式。

Navigation() {
   
  ...
}
.mode(NavigationMode.Stack)

分栏模式

将mode属性设置为NavigationMode.Split，Navigation组件即可设置为分栏显示模式。

@Entry
@Component
struct NavigationExample {
   
  @State TooTmp: ToolbarItem = {
   'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {
   }}
  private arr: number[] = [1, 2, 3];

  build() {
   
    Column() {
   
      Navigation() {
   
        TextInput({
    placeholder: 'search...' })
          .width("90%")
          .height(40)
          .backgroundColor('#FFFFFF')

        List({
    space: 12 }) {
   
          ForEach(this.arr, (item:string) => {
   
            ListItem() {
   
              NavRouter() {
   
                Text("NavRouter" + item)
                  .width("100%")
                  .height(72)
                  .backgroundColor('#FFFFFF')
                  .borderRadius(24)
                  .fontSize(16)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)
                NavDestination() {
   
                  Text("NavDestinationContent" + item)
                }
                .title("NavDestinationTitle" + item)
              }
            }
          }, (item:string):string => item)
        }
        .width("90%")
        .margin({
    top: 12 })
      }
      .title("主标题")
      .mode(NavigationMode.Split)
      .menus([
        {
   value: "", icon: "./image/ic_public_search.svg", action: ()=> {
   }},
        {
   value: "", icon: "./image/ic_public_add.svg", action: ()=> {
   }},
        {
   value: "", icon: