鸿蒙初学者学习手册_应用开发页面路由（页面路由(Navigation )（一））

实现页面路由可以分为两种方法，Router和Navigation
首先，想象一下你在玩手机上的一个App，比如淘宝。你从一个页面（比如首页）跳到另一个页面（比如商品详情页），这就是页面跳转。

页面路由（@ohos.router）：
这就像是一条条固定的路，比如从家到学校的路。你只能按照这些路走，不能随意偏离。
在App里，页面路由就是预定义好的跳转路径，你可以从A页面跳到B页面，但路径是固定的，不能随意改变。

组件导航（Navigation）：
这就像是你在一个大的公园里，公园里有小路、桥梁、草坪，你可以随意选择路径从一个地方走到另一个地方。
在App里，组件导航就是在一个更灵活的环境里，你可以从一个组件（比如一个按钮）跳到另一个页面，
或者甚至在同一个组件内部的不同部分跳转。
这种跳转方式更灵活，你可以根据自己的需求随时改变路径。

为什么推荐使用组件导航呢？

更灵活：就像你在公园里可以选择不同的路走一样，组件导航允许你在App里进行更灵活的跳转，不仅仅是页面之间，
还可以是组件内部的不同部分。
一次开发多端部署：这意味着你写一次代码，就可以在多个平台上（比如手机、平板）运行，而不需要为每个平台都写一遍。
页面栈操作：就像你记得自己走过的所有路一样，组件导航可以记住你的跳转历史，你可以随时返回到之前的页面。
丰富的动效和生命周期：就像你在公园里走路时看到的风景一样，组件导航可以添加各种动画效果，让跳转看起来更酷。
同时，它还能更好地管理组件的生命周期，比如一个组件什么时候被加载、什么时候被卸载。

概述

• 组件导航就像是咱们手机应用里的“交通警察”，它负责指挥不同的页面怎么跳转、怎么显示。它有三种显示模式，就像是三种不同的交通规则：单栏模式就像是一条直线，你只能按顺序走；分栏模式就像是十字路口，你可以同时看到两个方向的路；自适应模式就像是智能导航，它会根据你的手机屏幕大小来决定怎么走最合适。

导航里还有个重要的东西叫路由操作，它就像是导航里的“地图”，告诉你从哪儿到哪儿该怎么走。以前我们得用NavRouter这个“老地图”，但现在有了NavPathStack这个“新导航”，用起来更方便、更直观了。

导航页就像是你的“家”，上面有个标题栏告诉你这是哪儿，内容区是你看到的主要东西，工具栏是你可以操作的东西。而子页就像是你的“邻居”，你可以通过导航跳转到它们那里去。

跨包跳转就像是你要从一个小区走到另一个小区去，虽然它们不在同一个地方，但导航可以帮你找到路。

最后，跳转动效就像是路上的风景，让跳转看起来更酷、更有趣。

总的来说，组件导航就像是应用里的“交通系统”，它让页面之间跳转得更顺畅、更自然，让用户体验更好。

设置标题栏模式

标题栏在界面顶部，就像是一个页面的“门头”，它告诉我们现在看到的是哪个页面，同时还提供了一些操作入口，就像是门上的把手或者门铃。在HarmonyOS的Navigation组件中，标题栏的设计非常灵活，可以通过titleMode属性来设置它的不同模式。

设置菜单栏

菜单栏，就是那个在Navigation组件右上角的小角落，它像是我们页面的“快捷操作小帮手”。开发者朋友们可以通过menus属性，给它添加上各种好用的图标按钮。

menus属性特别灵活，它有两种玩法：一种是直接用Array来放图标，就像是摆了一排整齐的“快捷工具”；另一种是CustomBuilder，这个就像是让我们自己动手DIY一个独特的“操作面板”。

如果我们选择用Array来设置，那就要注意啦，竖屏的时候，它最多只能摆下3个图标，横屏则可以多放两个，变成5个。要是图标太多放不下怎么办？别担心，系统很聪明，会自动生成一个“更多”的按钮，把多余的图标都藏进去。这样，我们只需要轻轻一点“更多”，就能找到那些被藏起来的图标啦。

let TooTmp: NavigationMenuItem = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
Navigation() {
  // ...
}
.menus([TooTmp,
  TooTmp,
  TooTmp,
  TooTmp])

工具栏

工具栏，它就藏在Navigation组件的最底部，像是我们手机页面上的一个“小底座”，放满了各种实用的工具按钮。开发者朋友们可以通过toolbarConfiguration属性，来定制这个工具栏，想放什么按钮、按钮怎么排布，都由你们说了算。

这个工具栏啊，就像是一个“万能工具箱”，里面装满了我们可能需要用到的各种小工具。而且，它还很贴心，会根据我们的使用习惯和需求，进行智能的调整和布局。

    let TooTmp: ToolbarItem = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
    let TooBar: ToolbarItem[] = [TooTmp,TooTmp,TooTmp]
    Navigation() {
      // ...
    }
    .toolbarConfiguration(TooBar)

设置页面显示模式

单页面

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

以上是Navigation的一些页面组件的属性页面路由可以移步到

鸿蒙初学者学习手册_应用开发页面路由（页面路由(Navigation )（二））