【关键字】
@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