【HarmonyOS NEXT】开发页面栈管理功能时遇到的问题

 【关键字】

@ohos.router (页面路由)模块 / replaceUrl / Navigation组件 / 跨module跳转

【问题描述】

打算用一个页面栈管理类将所有页面都管理起来，调用这个页面栈管理类可以完成跳转、关闭、返回某个页面等一系列操作。

具体实现过程中，使用@ohos.router (页面路由) 模块相关API进行栈管理，但是遇到了两个问题。

• 问题一：当前页面栈里有10个routerName相同的页面，想要返回到10个页面中的第5个页面，用routerName返回只可返回到10个页面的栈顶页面，也尝试过在返回到10个页面的栈顶页面时连续调用5次router.back()，但是返回的动画里却能很清楚的看到中间的页面。

  请问下什么API可以实现此效果？

• 问题二：后来又尝试用Navigation组件的相关API去开发这个功能，发现Navigation虽有对应的API能满足返回指定页面的需求，但是Navigation的API无法进行跨module跳转，最终还是无法满足页面栈管理的诉求。有什么解决办法吗？

【解决方案】

• 问题一：如果确定要返回10个页面中的第5个页面，在使用@ohos.router (页面路由) 模块跳转的时候可以通过router.replaceUrl()方法达到目标页替换并销毁当前页的效果。

• 问题二：Navigation组件可以实现跨module跳转，示例如下。

  Entry包：

  //xxx.ets
  import { pageTwoTmp } from 'library'
  import { Pages } from 'library'
  
  @Entry
  @Component
  struct NavigationExample {
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()
  
  @Builder
  PageMap(name: string) {
  pageTwoTmp({ names: name, values: this.pageInfos } as Pages)
  }
  
  build() {
  Navigation(this.pageInfos) {
  Column() {
  Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
  .width('80%')
  .height(40)
  .margin(20)
  .onClick(() => {
  this.pageInfos.pushPath({ name: 'pageTwoTmp' }) //将name指定的NavDestination页面信息入栈
  })
  }
  }.title('NavIndex').navDestination(this.PageMap)
  }
  }
  
  // oh-package.json5中dependencies修改
  "dependencies": {
  "library": "file:../library"
  }

  HSP包，包名为library：

  // xxx.ets
  export class Pages {
  names: string = ""
  values: NavPathStack | null = null
  }
  
  
  @Builder
  export function pageTwoTmp(info: Pages) {
  NavDestination() {
  Column() {
  Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule })
  .width('80%')
  .height(40)
  .margin(20)
  .onClick(() => {
  (info.values as NavPathStack).pushPathByName('pageOne', null)
  })
  }.width('100%').height('100%')
  }.title('pageTwo')
  .onBackPressed(() => {
  (info.values as NavPathStack).pop()
  return true
  })
  }
  
  @Entry
  @Component
  struct pageTwo {
  build() {
  }
  }

  HSP module根目录下的index.ets：

  export { Pages } from "./src/main/ets/pages/PageTwo"
  export { pageTwoTmp } from "./src/main/ets/pages/PageTwo"

@ohos.router接口文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-router-0000001820880773#ZH-CN_TOPIC_0000001820880773__routerreplaceurl9

Navigation接口文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation-0000001821000861