HarmonyOS 鸿蒙Next中Router和Navigation在跳转上的区别

HarmonyOS 鸿蒙Next中Router和Navigation在跳转上的区别

• Router实现的是页面级跳转，作用区域为整个窗口中的页面，只能实现简单的跳转。
• Navigation实现的是组件级跳转，作用区域为Navigation组件所在的区域，能实现自定义动画、生命周期监听等各种功能。

下面有一个示例，首页是“路由页面1”，示例如下：

// Index.ets
@Entry
@Component
struct Index {

  build() {
    Column() {
      Text(`路由页面1`).width('100%').fontSize(22).fontWeight(2).padding(10)
      Button(`Router push 导航1主页面`).width('80%').margin({ top: 10, bottom: 10 })
        .onClick(() => {
          this.getUIContext().getRouter().pushUrl({ url: 'pages/Navigation1Index' });
        })
    }.width('100%').height('100%')
  }
}

页面结构如下：

可以看到，页面上没有Navigation组件，根组件是Index（在一些设备上可能父节点上还有个root，但是不影响内部的页面结构）。

由于页面上没有Navigation，所以只能使用Router跳转。现在调用pushUrl跳转到导航1主页面，示例如下：

@Component
export struct Navigation1Index {
  pathStack: NavPathStack = new NavPathStack();

  @Builder
  pagesMap(name: string) {
    if (name == 'Navigation1Page1') {
      Navigation1Page1()
    } else if (name == 'Navigation1Page2') {
      Navigation1Page2()
    }
  }

  build() {
    Navigation(this.pathStack) {
      Button(`Navigation push 导航1页面1`).width('80%').margin({ top: 10, bottom: 10 })
        .onClick(() => {
          this.pathStack.pushPath({ name: 'Navigation1Page1' });
        })
    }.title('导航1主页面')
    .titleMode(NavigationTitleMode.Mini)
    .navDestination(this.pagesMap)
  }
}

这时页面的根组件会发生变化，页面结构如下：

可以看到，页面的根组件已经换成了Navigation1Index，之前的Index已经不存在了，这就是页面级跳转。

而在导航1主页面，通过与Navigation绑定的NavPathStack调用pushPath接口跳转到“导航1页面1”，示例如下：

@Component
export struct Navigation1Page1 {
  pathStack: NavPathStack | undefined = undefined;

  build() {
    NavDestination() {
      Button('Navigation push 导航1页面2').width('80%').margin({ top: 10, bottom: 10 })
        .onClick(() => {
          this.pathStack?.pushPath({ name: 'Navigation1Page2' });
        })
      Button('Navigation pop').width('80%').margin({ top: 10, bottom: 10 })
        .onClick(() => {
          this.pathStack?.pop();
        })
    }.title('导航1页面1')
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    })
  }
}

页面结构如下：

可以看到，对比“导航1主页面”的结构，Navigation1Index、Navigation和NavDestinationContent节点都在页面上，“导航1页面1”的NavDestination组件挂在NavDestinationContent下面，页面的具体内容都在NavDestination组件内绘制，这就是组件级跳转。

此时再通过NavPathStack调用pushPath接口跳转到“导航1页面2”页面，页面结构如下：

可以看到，对比“导航1页面1”的结构，Navigation1Index、Navigation和NavDestinationContent节点都没有发生变化，只是替换了NavDestination节点。