HarmonyOS开发实战：两种路由框架方案规范-Navigation

 前言

官方文档中有两套路由方案：Router 和 Navigation。如果你刚开始入门，请直接看Navigation，并以此作为app的路由框架方案。

Naviagtion 的两种用法：底部带导航条，页面间跳转

底部带导航条

代码：

      Navigation() {
         ...
         // 内部布局样式
      }
      .title(this.NavigationTitle) // 自定义title布局样式 @builder
      .menus(this.NavigationMenus) // 自定义顶部工具菜单样式 @builder
      .titleMode(NavigationTitleMode.Full) // 固定大标题模式，Mini为小标题模式，还有Free模式
      .toolbarConfiguration([  // 底部导航栏
        {
          value: $r("app.string.navigation_toolbar_add"),
          icon: $r("app.media.ic_public_highlightsed"),
          activeIcon: ... // 选中时的Icon
          action:{} // 点击事件,
          status: ... ToolbarItemStatus // 可以让点击样式不变，我想没人没事会设置这个吧|||
        },
        {
          value: $r("app.string.navigation_toolbar_app"),
          icon: $r("app.media.ic_public_highlights")
        },
        {
          value: $r("app.string.navigation_toolbar_collect"),
          icon: $r("app.media.ic_public_highlights"),
        }
      ], 
        // api11 增加了背景颜色控制
        { 
          backgroundColor: ...
          backgroundBlurStyle: ... // 高斯模糊 BlurStyle
        }
      )
      .hideTitleBar(false)
      .hideToolBar(false)

随着API版本升级，有些方法官方已经废弃，有些方法则更改了名字，使用时记得检查当前版本。比如早期工具栏方法叫toolBar，最新的api10改名为toolbarConfigration。

工具栏其实就是底部导航栏，注意：

• 最多展示5个图标，
• 超过5个，显示4个，增加一个更多图标。
• 不设置则自动不展示底部导航条
• 点击事件对应action

最多展示5个图标

超过5个，展示4个+更多

点击更多，弹出选项

页面之间路由（重点介绍）

即 Navigation + NavPathSta