HarmonyOS 鸿蒙Next Navigation launchMode 问题咨询

请问是因为每个NavDestination中记了状态，所以需要这个能力？如果是这样的话，可以用appstorage把状态独立出来。

具体到楼主的问题，官方api没有现成的launchMode或者函数，要自己记录路由栈实现，以下是一个简单的demo，从官方示例修改而来

1. 自己记录路由栈，这个比较简单

export default class History {
  private static arr: string[] = [];
static push(name: string) {
History.arr.push(name);
}
static pop(): string | undefined {
return History.arr.pop();
}
static toString(): string {
return History.arr.join(’,’)
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

2. 前进和后退都要重写，简单来说，前进的时候使用LaunchMode.MOVE_TO_TOP_SINGLETON，后退的时候使用move

以下是pageOne.ets

import Logger from ‘…/common/utils/Logger’;
import History from ‘…/History’;
import prompt from ‘@ohos.prompt’;
import { uiObserver } from ‘@kit.ArkUI’;

@Builder
export function PageOneBuilder(name: string, param: Object) {
PageOne()
}
const COLUMN_SPACE: number = 12;
@Component
export struct PageOne {
@State count: number = 0;
pageInfos: NavPathStack = new NavPathStack();
navDesInfo: uiObserver.NavDestinationInfo | undefined
@State currentNavPathStackStr: string = ‘’;
@State currentCustomizedNavStack: string = ‘’;
aboutToAppear(): void {
uiObserver.on(‘navDestinationUpdate’, (info) => {
this.currentNavPathStackStr = this.pageInfos.getAllPathName().join(’,’);
this.currentCustomizedNavStack = History.toString();
});
}
goTo(name: string) {
let pathNames = this.pageInfos.getAllPathName();
let index = pathNames.indexOf(name);
if (index >= 0) {
this.pageInfos.pushDestination(new NavPathInfo(name, null), {
launchMode: LaunchMode.MOVE_TO_TOP_SINGLETON
});
} else {
this.pageInfos.pushPathByName(name, null);
}
}
back(name: string) {
let pathNames = this.pageInfos.getAllPathName();
let index = pathNames.indexOf(name);
if (index >= 0) {
this.pageInfos.moveToTop(name, false);
} else {
prompt.showToast({
message: 'page ’ + name + ‘does not exist’
});
}
}
build() {
NavDestination() {
Column({ space: COLUMN_SPACE }) {
Text('当前路由栈，navPathStack = ’ + this.currentNavPathStackStr).align(Alignment.Start);
Text('自己记录的路由栈，customizednavstack = ’ + this.currentCustomizedNavStack).align(Alignment.Start);
Text('模拟保存状态，count = ’ + this.count).align(Alignment.Start);
Button(‘count++’, { stateEffect: true, type: ButtonType.Capsule })
.width($r(‘app.string.button_width’)).height($r(‘app.string.button_height’)).onClick(() => {
this.count++;
})
Button($r(‘app.string.entry_pageTwo’), { stateEffect: true, type: ButtonType.Capsule })
.width($r(‘app.string.button_width’)).height($r(‘app.string.button_height’)).onClick(() => {
History.push(‘pageOne’);
this.goTo(‘pageTwo’);
})
}
.width($r(‘app.string.navDestination_width’))
.height($r(‘app.string.navDestination_height’))
.justifyContent(FlexAlign.End)
.padding({
bottom: $r(‘app.string.column_padding’),
left: $r(‘app.string.column_padding’),
right: $r(‘app.string.column_padding’)
})
}
.title(‘entry-pageOne’)
.onBackPressed(() => {
let pop = History.pop();
if (pop != undefined) {
this.back(pop);
return true;
}
prompt.showToast({
message: ‘不能再回退了’
});
return true;
})
.onReady((context: NavDestinationContext) => {
this.pageInfos = context.pathStack;
Logger.info("current page config info is " + JSON.stringify(context.getConfigInRouteMap()));
})
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

pageTwo.ets

import Logger from ‘…/common/utils/Logger’;
import History from ‘…/History’;
import { prompt, uiObserver } from ‘@kit.ArkUI’;

@Builder
export function PageTwoBuilder(name: string, param: Object) {
PageTwo()
}
const COLUMN_SPACE: number = 12;
@Component
export struct PageTwo {
pageInfos: NavPathStack = new NavPathStack();
navDesInfo: uiObserver.NavDestinationInfo | undefined
@State currentNavPathStackStr:string = ‘’;
@State currentCustomizedNavStack:string = ‘’;
aboutToAppear(): void {
uiObserver.on(‘navDestinationUpdate’, (info) => {
this.currentNavPathStackStr = this.pageInfos.getAllPathName().join(’,’);
this.currentCustomizedNavStack = History.toString();
});
}
goTo(name: string) {
let pathNames = this.pageInfos.getAllPathName();
let index = pathNames.indexOf(name);
if (index >= 0) {
this.pageInfos.pushDestination(new NavPathInfo(name, null), {
launchMode: LaunchMode.MOVE_TO_TOP_SINGLETON
});
} else {
this.pageInfos.pushPathByName(name, null);
}
}
back(name: string) {
let pathNames = this.pageInfos.getAllPathName();
let index = pathNames.indexOf(name);
if (index >= 0) {
this.pageInfos.moveToTop(name, false);
} else {
prompt.showToast({
message: 'page ’ + name + ‘does not exist’
});
}
}
build() {
NavDestination() {
Column({ space: COLUMN_SPACE }) {
Text('当前路由栈，navPathStack = ’ + this.currentNavPathStackStr).align(Alignment.Start);
Text('自己记录的路由栈，customizednavstack = ’ + this.currentCustomizedNavStack).align(Alignment.Start);
Button($r(‘app.string.entry_pageOne’), { stateEffect: true, type: ButtonType.Capsule })
.width($r(‘app.string.button_width’))
.height($r(‘app.string.button_height’))
.onClick(() => {
//Push the NavDestination page information specified by name onto the stack, and pass the data as param.
History.push(‘pageTwo’);
this.goTo(‘pageOne’);
})
}
.width($r(‘app.string.navDestination_width’))
.height($r(‘app.string.navDestination_height’))
.justifyContent(FlexAlign.End)
.padding({
bottom: $r(‘app.string.column_padding’),
left: $r(‘app.string.column_padding’),
right: $r(‘app.string.column_padding’)
})
}
.title(‘entry-pageTwo’)
.onBackPressed(() => {
let pop = History.pop();
if (pop != undefined) {
this.back(pop);
return true;
}
prompt.showToast({
message: ‘不能再回退了’
});
return true;
})
.onReady((context: NavDestinationContext) => {
this.pageInfos = context.pathStack
Logger.info('current page config info is ’ + JSON.stringify(context.getConfigInRouteMap()));
})
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

3. 首页基本不变

@Entry
@Component
struct NavigationExample {
pageInfos: NavPathStack = new NavPathStack();

build() {
Navigation(this.pageInfos) {
Column({ space: 12 }) {
Button($r(‘app.string.entry_pageOne’), { stateEffect: true, type: ButtonType.Capsule })
.width($r(‘app.string.button_width’))
.height($r(‘app.string.button_height’))
.onClick(() => {
this.pageInfos.pushPathByName(‘pageOne’, null);
})
}
.width($r(‘app.string.navDestination_width’))
.height($r(‘app.string.navDestination_height’))
.justifyContent(FlexAlign.End)
.padding({
bottom: $r(‘app.string.column_padding’),
left: $r(‘app.string.column_padding’),
right: $r(‘app.string.column_padding’)
})
}
.title($r(‘app.string.entry_index_title’))
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>