• Navigation 主要关注 页面之间的跳转和用户交互，例如从主页跳转到详情页。在鸿蒙系统中，我们可以通过 @ohos.router 模块的 router.push 或 startAbility 实现页面跳转和参数传递。
• Router 则主要关注 URL 与页面之间的映射关系，例如根据 URL 加载不同的页面。在鸿蒙系统中，Router 也是通过 @ohos.router 模块实现的，支持路由配置、参数解析和重定向等功能

易⽤性层⾯:

Navigation天然具备标题、内容、回退按钮的功能联动

Navigation天然⽀持⼀多，Router不⽀持;

Navigation没有路由数量限制，Router限制32个;

Navigation可以嵌套在模态对话框中，也就是说可以模态框中定义路由，Router不⽀持

他们的主要区别就是router适用于简单场景的跳转一般来说项目小跳转量不多简易的页面可以使用router

第一步:首先Navigation的使用需要先在build内使用Navigation

build() {
  Navigation(this.pathStack) {
    Column({ space: 10 }) {
      Text('首页')
        .fontSize(30)
      Button('Navigation路由')
        .onClick(() => {
          // this.pathStack.pushPath({ name: '组件名称', param: 参数 })
          // this.pathStack.pushPathByName('组件名称'.参数) 如果跳转不需要传参就写null
          // this.pathStack.pushPath({ name: 'Detail', param: '首页' })
          this.pathStack.pushPathByName('Detail', null)
        })
      MySon()
    }
    .width('100%')
    .height('100%')
  }
  .hideTitleBar(true) // 隐藏标题栏
}

第二步:实例化后存入到Provide中因为后续其他页面组件中也需要使用到

@Provide pathStack: NavPathStack = new NavPathStack()

第三步:例如在首页创建一个Component子组件那就使用Consume来接收跳转的使用方法都一样

@Component
struct MySon {
  @Consume pathStack: NavPathStack

  build() {
    Column() {
      Text('子组件')
        .fontSize(30)
        .fontColor(Color.Red)
      Button('子组件-Navigation路由')
        .onClick(() => {
          // this.pathStack.pushPath({ name: 'pages/MySonPage', param: '首页' })
          this.pathStack.pushPathByName('Detail', null)
        })
    }
  }
}

第四步:创建一个跳转的页面举例为详情页 

其中自己添加的返回键需要用Consume接收后再使用

build() {
    Column() {
      Text('详情页')
        .fontSize(30)
      Button('返回')
        .onClick(() => {
          this.pathStack.pop()
        })
    }
    .width('100%')
    .height('100%')
  }

第五步:在跳转的页面创建一个全局的Builder

@Builder
function DetailBuilder() {
  //2.使用NavDestination
  NavDestination() {
    Detail()
  }.hideTitleBar(true) //关闭自带的头部导航栏
}

第六步:在resources/base/profile创建一个文件route_map.json

{
  "routerMap": [
    {
      "name": "Detail", //跳转的组件名
      "pageSourceFile": "src/main/ets/pages/Detail.ets", //跳转的组件路径
      "buildFunction": "DetailBuilder" //跳转组件中的全局builder名称
    }
  ]
}

第七步:在module.json5中添加这个

需要注意就是不要添加到json5中其他数组中折叠后再上一个的最后添加逗号换行完添加这行代码

 "routerMap": "$profile:route_map"