HarmonyOS入门第二章——彻底搞懂ArkUI(3)

上回讲了HarmonyOS入门第二章——彻底搞懂ArkUI(2)，主要讲的是UI中的布局。

什么是导航？

今天来讲讲UI中还有一类比较重要的元素——导航，顾名思义，导航其实就是把我们从一个点带到另外一个地方去的行为。在地图中导航的时候，是需要我们驾驶交通工具才能到达。而在UI中的导航，只需要我们轻轻点一下，系统就自动带我们到另外一个地方去了。

为什么需要导航？

那为什么需要导航呢？原因还是因为上一篇文章所讲到：我们的内容总是无穷无尽的，受限于屏幕的物理尺寸，有时候需要将多余的内容进行滚动、翻页展示。或者将不重要的内容放到其他的页面，通过导航跳转来展示。

HarmonyOS中的导航

HarmonyOS中的导航分为两种，一种是组件导航Navigation，一种是编程导航@ohos.router。

组件导航

组件导航就是将我们的内容放到组件Navigation里面，Navigation组件通常可以设置页面显示模式、标题栏模式、菜单栏内容、工具栏内容、子页面类型。Navigation并不是必须要使用的。Navigation其实就是编程导航+高可扩展性的页面框架。它可以帮助我们提高效果。但我们应当根据UI稿来判断Navigation是否能满足我们的需求，来决定是否使用它。如发现不满足时可以采用自己布局+编程导航的方式实现需求。

典型的组件导航代码如下所示：

Navigation() {        // 页面内容      }      .title("主标题")      .mode(NavigationMode.Split)      .menus([        {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}      ])      .toolbarConfiguration([this.TooTmp, this.TooTmp, this.TooTmp])    }    .height('100%')    .width('100%')    .backgroundColor('#F1F3F5')

编程导航

编程导航的好处是可以通过编程的方式来触发页面跳转，不一定需要用户的点击行为触发。常见的应用场景如：用户打开APP，APP请求服务端数据时发现用户未登录，此时则不需要用户的点击，直接调用编程导航即可跳转到登录页。代码像下面这样：

import router from '@ohos.router'
router.pushUrl({    url: 'pages/Detail' // 目标url  }, router.RouterMode.Standard, (err) => {  });

好了，关于导航的分享就到这里，具体的用法以及传参要求请参考鸿蒙官方文档。咱在文章中主要聊思路，谢谢。

关于菁英老猎人

---

    菁英老猎人拥有12+年的软件开发经验，一直专注于大前端领域，对原生APP开发、混合APP开发和鸿蒙APP开发都有较深入的研究，曾使用cordova、uni-app、React-Native、Flutter做过大量的项目，现在开始研究鸿蒙应用开发，擅长对APP开发的相关知识深入浅出。关注我，带你快速、扎实的学习鸿蒙应用开发。