HarmonyOS Navigation实现路由，主页面onPageShow只会再进入后台再进入前台的时候触发，如果是跳转了页面再回来主页面，不会触发？

Question

Navigation实现路由，主页面onPageShow，onPageHide只会再进入后台再进入前台的时候触发，如果是跳转了页面再回来主页面，不会触发

从二级页返回时能后知晓主页面的可见性变化

demo：

主页面

@Entry
@Component
struct Index {
  pathStack: NavPathStack = new NavPathStack()


  @Builder
  PageBuilder(name: string) {
    PageOne()
  }

  onPageShow() {
    console.log('1111111')
  }

  onPageHide() {
    console.log('1111111 22222')
  }

  build() {
    Navigation(this.pathStack) {
      Column() {
        Button('Push PageOne', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pathStack.pushPathByName('pageOne', null)
          })
      }.width('100%').height('100%')
    }
    .navDestination(this.PageBuilder)
    .title("Navigation")
  }
}

二级页：

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

  build() {
    NavDestination() {
      Column() {
        Button('回到首页', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pathStack.clear()
          })
      }.width('100%').height('100%')
    }.title('PageOne')
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack
    })
  }
}

Answer 1

可以使用NavPathStack配合navDestination属性进行页面路由，跳转时可以携带页面的信息，NavDestination有相关的 onShown 和 onHidden 方法。

参考文档：

NavPathStack文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V1/ts-basic-components-navigation-0000001580026346-V1\#ZH-CN\_TOPIC\_0000001666547556\_\_navpathstack10

NavDestination文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navdestination-V5

onPageShow()方法仅在@Entry装饰的自定义组件生效，在Navigation包裹的NavDestination子页面返回时无法触发。

您可以使用如下两种方式监听返回主页面的显示隐藏，在回调方法中处理您的自有业务逻辑，具体说明如下：

1、监听Navigation的onNavBarStateChange()事件，在回调中判断显示隐藏：

参考文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navigation-V5\#事件

简单示例：

Navigation(this.pageInfos) {
}
.onNavBarStateChange((isVisible: boolean) => {
  console.info('------>isVisible：' + isVisible)
})

2、使用无感监听observer.on(‘navDestinationUpdate’)：

在主页面中添加上述监听，在回调方法中进行判断：①、判断结果中的name是否等于紧跟主页面之后打开的子页面；②、判断state状态是否等于1

参考文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-observer-V5\#observeronnavdestinationupdate

简单示例：

aboutToAppear(): void {
  observer.on('navDestinationUpdate', (info) => {
  console.info('------>NavDestination state update', JSON.stringify(info));
});
}
aboutToDisappear(): void {
  observer.off('navDestinationUpdate');
}