HarmonyOS uiObserver监听页面变化问题？

Question

uiObserver.on('navDestinationUpdate', (info: NavDestinationInfo) => {
  console.error('路由变化：'+ info.state + '-' +info.name);
});

全局注册以上代码

A页面打开到B页面，调用顺序

B页面的aboutToAppear先调用，在调用navDestinationUpdate的全局监听

console.error('路由变化：'+ info.state + '-' +info.name);

我希望还有一个可以先执行全局监听，再进入B页面的aboutToAppear，有类似的api吗

Answer 1

看下下面简版示例是否满足诉求。

1、可在CommonRouter 公共拦截，跳转/返回 都可加自己的逻辑对应：pushPathByName 、 pop 或者自定义其他函数

2、返回的时候 触发 CommonRouter.instance.pop()

3、监听的话 采用@Watch 需跟随状态变量一起绑定

// ./CommonRouter/CommonRouter.ets
export class CommonRouter {
  static stack: NavPathStack;
  static instance: CommonRouter;

  static init(stack: NavPathStack) {
    CommonRouter.stack = stack;
  }

  static getInstance() {
    if (!CommonRouter.instance) {
      CommonRouter.instance = new CommonRouter();
    }
    return CommonRouter.instance;
  }

  pushPathByName(routeName: string) {
    // 跳转页面逻辑拦截 TODO
    console.info('跳转页面逻辑拦截 TODO')
    CommonRouter.stack.pushPathByName(routeName, '')
  }

  pop() {
    // 返回逻辑拦截 TODO
    console.info('返回逻辑拦截 TODO')
    CommonRouter.stack.pop()
  }

  clear() {
    CommonRouter.stack.clear()
  }
}

// NavigationExample.ets

import { CommonRouter} from "./CommonRouter/CommonRouter"
import { PageOne } from './PageOne'
import { PageTwo } from './PageTwo'

@Entry
@Component
struct NavigationExample {
  @Provide('pageInfos') @Watch('WatchpageInfos') pageInfos: NavPathStack = new NavPathStack()

  aboutToAppear() {
    CommonRouter.init(this.pageInfos);
  }

  WatchpageInfos(prop: string){
    console.log('WatchpageInfos---',prop)
  }
  @Builder
  PageMap(name: string) {
    if (name === 'pageOne') {
      PageOne()
    } else if (name === 'pageTwo') {
      PageTwo()
    } else {
      PageOne()
    }
  }

  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('pushPageOne', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            CommonRouter.getInstance().pushPathByName('pageOne')
          })
        Button('pushPageTwo', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            CommonRouter.getInstance().pushPathByName('pageTwo')
          })
      }
    }.title('NavIndex')
    .navDestination(this.PageMap)
  }
}