鸿蒙界面开发——组件（7）：组件导航 页面路由

组件导航 (Navigation)(推荐)

Navigation()
Navigation(pathInfos: NavPathStack)

Navigation是路由容器组件，一般作为首页的根容器，包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。Navigation组件适用于模块内和跨模块的路由切换，一次开发，多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。在不同尺寸的设备上，Navigation组件能够自适应显示大小，自动切换分栏展示效果。

Navigation组件主要包含​导航页(NavBar)和子页(NavDestination)。
导航页由标题栏(Titlebar，包含菜单栏menu)、内容区(Navigation子组件)和工具栏(Toolbar)组成，其中导航页可以通过hideNavBar属性进行隐藏，导航页不存在页面栈中，导航页和子页，以及子页之间可以通过路由操作进行切换。

子组件

可以包含子组件。
在API Version 9上，需要配合NavRouter组件实现页面路由，从API Version 10开始，推荐使用NavPathStack实现页面路由。

示例

1. 主页面
创建一个页面栈对象并传入Navigation
@Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()页面栈对象传入NavigationNavigation(this.pageInfos) {List({ space: 12 }) {ForEach(this.arr, (item:string) => {ListItem() {Text("NavRouter" + item)....onClick(()=>{  // 点击跳转 页面路由操作，参见下文详解  pushPath  namethis.pageInfos.pushPath({ name: "NavDestinationTitle" + item})})}}, (item:string):string => item)}}.title("主标题").mode(NavigationMode.Stack) //单栏显示.navDestination(this.PageMap) //创建NavDestination组件3. 子页面
@Builder
PageMap(name: string) {if (name === "NavDestinationTitle1") { //pushPath({ name: "NavDestinationTitle1" })pageOneTmp()} else if (name === "NavDestinationTitle2") {pageTwoTmp()} else if (name === "NavDestinationTitle3") {pageThreeTmp()}
}3.子页面结构
@Component
export struct pageOneTmp {@Consume('pageInfos') pageInfos: NavPathStack;build() {//NavDestination组件NavDestination() {Column() {...}}.title("NavDestinationTitle1").onBackPressed(() => {const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素return true})}
}

属性

除支持通用属性外，还支持以下属性：

  1. title(value: ResourceStr | CustomBuilder | NavigationCommonTitle | NavigationCustomTitle, options?: NavigationTitleOptions)设置页面标题。
  2. menus(value: Array | CustomBuilder)设置页面右上角菜单。不设置时不显示菜单项。
    使用Array 写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被自动收齐，放入自动生成的更多图标。
    说明：不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。
let TooTmp: NavigationMenuItem = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
Navigation() { ...}.menus([TooTmp,...])
  1. titleMode(value: NavigationTitleMode)设置页面标题栏显示模式。
    标题栏在界面顶部，用于呈现界面名称和操作入口
    Mini模式：普通型标题栏，用于一级页面不需要突出标题的场景。
    Full模式：强调型标题栏，用于一级页面需要突出标题的场景。
Navigation() { ...}.titleMode(NavigationTitleMode.Mini)
Navigation() { ...}.titleMode(NavigationTitleMode.Full)
  1. toolbarConfiguration(value: Array | CustomBuilder, options?: NavigationToolbarOptions)设置底部工具栏内容。不设置时不显示工具栏。
    说明：不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。
let TooTmp: ToolbarItem = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
let TooBar: ToolbarItem[] = [TooTmp,TooTmp,TooTmp]
Navigation() {..}.toolbarConfiguration(TooBar)
  1. hideToolBar(value: boolean)设置是否隐藏工具栏。
  2. hideTitleBar(value: boolean)
  3. hideBackButton(value: boolean)设置是否隐藏标题栏中的返回键。返回键仅针对titleMode为NavigationTitleMode.Mini时才生效。
  4. hideNavBar(value: boolean)设置是否隐藏导航栏。设置为true时，隐藏Navigation的导航栏，包括标题栏、内容区和工具栏。如果此时路由栈中存在NavDestination页面，则直接显示栈顶NavDestination页面，反之显示空白。
  5. navBarWidth(value: Length)设置导航栏宽度。仅在Navigation组件分栏时生效。
  6. navBarPosition(value: NavBarPosition)设置导航栏位置。仅在Navigation组件分栏时生效。
  7. mode(value: NavigationMode)设置导航栏的显示模式。支持Stack、Split与Auto模式。
    自适应模式：Navigation组件默认为自适应模式，此时mode属性为NavigationMode.Auto。自适应模式下，当页面宽度大于等于一定阈值( API version 9及以前：520vp，API version 10及以后：600vp )时，Navigation组件采用分栏模式，反之采用单栏模式。
Navigation() {...}.mode(NavigationMode.Auto)

单页面模式：NavigationMode.Stack
在这里插入图片描述

分栏模式：NavigationMode.Split
在这里插入图片描述

  1. backButtonIcon(value: string | PixelMap | Resource | SymbolGlyphModifier)设置标题栏中返回键图标。
    说明:
    不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。
  2. navDestination(builder: (name: string, param: unknown) => void) 创建NavDestination组件。使用builder函数，基于name和param构造NavDestination组件。builder下只能有一个根节点。builder中允许在NavDestination组件外包含一层自定义组件， 但自定义组件不允许设置属性和事件，否则仅显示空白。
  3. navBarWidthRange(value: [Dimension, Dimension])设置导航栏最小和最大宽度（双栏模式下生效）。
  4. minContentWidth(value: Dimension) 设置导航栏内容区最小宽度（双栏模式下生效）。
    默认值：360单位：vp
    undefined：行为不做处理，导航栏内容区最小宽度与默认值保持一致。
    Auto模式断点计算：默认600vp，minNavBarWidth(240vp) + minContentWidth (360vp)
    说明:
    仅设置navBarWidth，不支持Navigation分割线拖拽。
    navBarWidthRange指定分割线可以拖拽范围。如果不设置值，则按照默认值处理。拖拽范围需要满足navBarWidthRange设置的范围和minContentWidth限制。
    Navigation显示范围缩小：a. 缩小内容区大小。如果不设置minContentWidth属性，则可以缩小内容区至0， 否则最小缩小至minContentWidth。b. 缩小导航栏大小，缩小时需要满足导航栏宽度大于navBarRange的下限。c. 对显示内容进行裁切。
  5. ignoreLayoutSafeArea(types?: Array, edges?: Array)控制组件的布局，使其扩展到非安全区域
  6. systemBarStyle(style: Optional)当Navigation中显示Navigation首页时，设置对应系统状态栏的样式。

事件

onTitleModeChange
onNavBarStateChange9+
onNavigationModeChange11+
customNavContentTransition11+

路由操作详解——页面栈NavPathStack对象

Navigation路由相关的操作都是基于页面栈NavPathStack提供的方法进行，每个Navigation都需要创建并传入一个NavPathStack对象，用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。

从API version 12开始，页面栈允许被继承。开发者可以在派生类中自定义属性和方法，也可以重写父类的方法。派生类对象可以替代基类NavPathStack对象使用。

创建页面栈对象

struct Index {// 1.创建一个页面栈对象并传入NavigationpageStack: NavPathStack = new NavPathStack()build() {// 2. 传入页面栈对象Navigation(this.pageStack) {...}.title('Main')}
}

页面跳转

pushPath(info: NavPathInfo, animated?: boolean): void  将info指定的NavDestination页面信息入栈。
pushPath(info: NavPathInfo, options?: NavigationOptions): void 将info指定的NavDestination页面信息入栈，具体根据options中指定不同的LaunchMode，有不同的行为。

info NavPathInfo 是 NavDestination页面的信息。
animated boolean 否 是否支持转场动画，默认值：true。
options NavigationOptions 否 页面栈操作选项。launchMode&animated
LaunchMode枚举说明：
STANDARD 系统默认的栈操作模式。push操作会将指定的NavDestination入栈；replace操作会将当前栈顶NavDestination替换。

MOVE_TO_TOP_SINGLETON 从栈底向栈顶查找，如果指定的名称已经存在，则将对应的NavDestination页面移到栈顶（replace操作会将最后的栈顶替换成指定的NavDestination），否则行为和STANDARD一致。

POP_TO_SINGLETON 从栈底向栈顶查找，如果指定的名称已经存在，则将其上方的NavDestination页面全部移除（replace操作会将最后的栈顶替换成指定的NavDestination），否则行为和STANDARD一致。

NEW_INSTANCE 创建新的NavDestination实例。与STANDARD模式相比，该方法不会复用栈中同名实例。

pushPathByName(name: string, param: unknown, animated?: boolean): void将name指定的NavDestination页面信息入栈，传递的数据为param。
pushPathByName(name: string, param: Object, onPop: Callback<PopInfo>, animated?: boolean): void将name指定的NavDestination页面信息入栈，传递的数据为param，添加onPop回调接收入栈页面出栈时的返回结果，并进行处理。

name string 是 NavDestination页面名称。
param unknown 是 NavDestination页面详细参数。
onPop Callback 是 Callback回调，用于页面出栈时触发该回调处理返回结果。仅pop中设置result参数后触发。
param Object 是 NavDestination页面详细参数。

pushDestination(info: NavPathInfo, animated?: boolean): Promise<void> 将info指定的NavDestination页面信息入栈，使用Promise异步回调返回接口调用结果。
pushDestination(info: NavPathInfo, options?: NavigationOptions): Promise<void>将info指定的NavDestination页面信息入栈，使用Promise异步回调返回接口调用结果，具体根据options中指定不同的LaunchMode，有不同的行为。pushDestinationByName(name: string, param: Object, animated?: boolean): Promise<void>将name指定的NavDestination页面信息入栈，传递的数据为param，使用Promise异步回调返回接口调用结果。
pushDestinationByName(name: string, param: Object, onPop: Callback<PopInfo>, animated?: boolean): Promise<void>将name指定的NavDestination页面信息入栈，传递的数据为param，并且添加用于页面出栈时处理返回结果的OnPop回调，使用Promise异步回调返回接口调用结果。

NavPathStack通过Push相关的接口去实现页面跳转的功能，主要分为以下三类:

  1. 普通跳转，通过页面的name去跳转，并可以携带param。
this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.pushPathByName("PageOne", "PageOne Param")
  1. 带返回回调的跳转，跳转时添加onPop回调，能在页面出栈时获取返回信息，并进行处理。
this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
});
  1. 带错误码的跳转，跳转结束会触发异步回调，返回错误码信息。
this.pageStack.pushDestinationByName('PageOne', "PageOne Param")
.catch((error: BusinessError) => {console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
}).then(() => {
console.error('Push destination succeed.');
});

页面返回

NavPathStack通过Pop相关接口去实现页面返回功能。

// 返回到上一页
this.pageStack.pop()
// 返回到上一个PageOne页面
this.pageStack.popToName("PageOne")
// 返回到索引为1的页面
this.pageStack.popToIndex(1)
// 返回到根首页（清除栈中所有页面）
this.pageStack.clear()

pop(animated?: boolean): NavPathInfo | undefined 弹出路由栈栈顶元素。
pop(result: Object, animated?: boolean): NavPathInfo | undefined弹出路由栈栈顶元素，并触发onPop回调传入页面处理结果。popToName(name: string, animated?: boolean): number 回退路由栈到由栈底开始第一个名为name的NavDestination页面。
popToName(name: string, result: Object, animated?: boolean): number回退路由栈到由栈底开始第一个名为name的NavDestination页面，并触发onPop回调传入页面处理结果。popToIndex(index: number, animated?: boolean): void回退路由栈到index指定的NavDestination页面。
popToIndex(index: number, result: Object, animated?: boolean): void回退路由栈到index指定的NavDestination页面，并触发onPop回调传入页面处理结果。

页面替换

NavPathStack通过Replace相关接口去实现页面替换功能。

// 将栈顶页面替换为PageOne
this.pageStack.replacePath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.replacePathByName("PageOne", "PageOne Param")

replacePath(info: NavPathInfo, animated?: boolean): void将当前页面栈栈顶退出，将info指定的NavDestination页面信息入栈。
replacePath(info: NavPathInfo, options?: NavigationOptions): void替换页面栈操作，具体根据options中指定不同的LaunchMode，有不同的行为。replacePathByName(name: string, param: Object, animated?: boolean): void

页面删除

NavPathStack通过Remove相关接口去实现删除页面栈中特定页面的功能。

// 删除栈中name为PageOne的所有页面
this.pageStack.removeByName("PageOne")
// 删除指定索引的页面
this.pageStack.removeByIndexes([1,3,5])

removeByIndexes(indexes: Array<number>): number将页面栈内索引值在indexes中的NavDestination页面删除。返回删除的NavDestination页面数量。
removeByName(name: string): number将页面栈内指定name的NavDestination页面删除。返回删除的NavDestination页面数量。
removeByNavDestinationId(navDestinationId: string): boolean将页面栈内指定navDestinationId的NavDestination页面删除。navDestinationId可以在NavDestination的onReady回调中获取，也可以在NavDestinationInfo中获取。返回是否成功删除该页面，true为删除成功。

navDestinationId string 是 删除的NavDestination页面的唯一标识符navDestinationId。

参数获取

NavPathStack通过Get相关接口去获取页面的一些参数。

// 获取栈中所有页面name集合
this.pageStack.getAllPathName()
// 获取索引为1的页面参数
this.pageStack.getParamByIndex(1)
// 获取PageOne页面的参数
this.pageStack.getParamByName("PageOne")
// 获取PageOne页面的索引集合
this.pageStack.getIndexByName("PageOne")

路由拦截

NavPathStack提供了setInterception方法，用于设置Navigation页面跳转拦截回调。

setInterception(interception: NavigationInterception): void设置Navigation页面跳转拦截回调。

该方法需要传入一个NavigationInterception对象，该对象包含三个回调函数：
willShow 页面跳转前回调，允许操作栈，在当前跳转生效。
didShow 页面跳转后回调，在该回调中操作栈会在下一次跳转生效。
modeChange Navigation单双栏显示状态发生变更时触发该回调。
说明
无论是哪个回调，在进入回调时页面栈都已经发生了变化。

开发者可以在willShow回调中通过修改路由栈来实现路由拦截重定向的能力。

this.pageStack.setInterception({willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar",operation: NavigationOperation, animated: boolean) => {if (typeof to === "string") {console.log("target page is navigation home page.");return;}// 将跳转到PageTwo的路由重定向到PageOnelet target: NavDestinationContext = to as NavDestinationContext;if (target.pathInfo.name === 'PageTwo') {target.pathStack.pop();target.pathStack.pushPathByName('PageOne', null);}}
})

其他

详情参见：here。

moveToTop10+将由栈底开始第一个名为name的NavDestination页面移到栈顶。
moveIndexToTop10+
size10+获取栈大小。
disableAnimation11+关闭（true）或打开（false）当前Navigation中所有转场动画。
getParent11+
setInterception12+

子页面NavDestination

NavDestination
NavDestination组件必须配合Navigation使用，作为Navigation目的页面的根节点，单独使用只能作为普通容器组件，不具备路由相关属性能力。

如果页面栈中间页面的生命周期发生变化，跳转之前的栈顶Destination的生命周期(onWillShow, onShown, onHidden, onWillDisappear)与跳转之后的栈顶Destination的生命周期(onWillShow, onShown, onHidden, onWillDisappear)均在最后触发。
子页面结构如下所示：

3.子页面结构
@Component
export struct pageOneTmp {@Consume('pageInfos') pageInfos: NavPathStack;build() {//NavDestination组件NavDestination() {Column() {...}}.title("NavDestinationTitle1").onBackPressed(() => {const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素return true})}
}

NavDestination是Navigation子页面的根容器，用于承载子页面的一些特殊属性以及生命周期等。NavDestination可以设置独立的标题栏和菜单栏等属性，使用方法与Navigation相同。NavDestination也可以通过mode属性设置不同的显示类型，用于满足不同页面的诉求。

子页面显示类型

  1. 标准类型
    NavDestination组件默认为标准类型，此时mode属性为NavDestinationMode.STANDARD。标准类型的NavDestination的生命周期跟随其在NavPathStack页面栈中的位置变化而改变。

  2. 弹窗类型
    NavDestination设置mode为NavDestinationMode.DIALOG弹窗类型，此时整个NavDestination默认透明显示。弹窗类型的NavDestination显示和消失时不会影响下层标准类型的NavDestination的显示和生命周期，两者可以同时显示。

页面生命周期

Navigation作为路由容器，其生命周期承载在NavDestination组件上，以组件事件的形式开放。

其生命周期大致可分为三类，自定义组件生命周期、通用组件生命周期和自有生命周期。

华为开发文档原话：其中，aboutToAppear和aboutToDisappear是自定义组件的生命周期。如果NavDestination外层包含自定义组件时则存在，OnAppear和OnDisappear是组件的通用生命周期。剩下的六个生命周期为NavDestination独有。

自己理解：aboutToAppear和aboutToDisappear是自定义组件的生命周期，如果NavDestination外层包含自定义组件时则存在。OnAppear和OnDisappear是组件的通用生命周期。剩下的六个生命周期为NavDestination独有。
（句号的位置会让句子的意思改变）

生命周期时序如下图所示：
在这里插入图片描述

  • aboutToAppear(自定义)：在创建自定义组件后，执行其build()函数之前执行（NavDestination创建之前），允许在该方法中改变状态变量，更改将在后续执行build()函数中生效。
  • onWillAppear：NavDestination创建后，挂载到组件树之前执行，在该方法中更改状态变量会在当前帧显示生效。
  • onAppear（通用）：通用生命周期事件，NavDestination组件挂载到组件树时执行。
  • onWillShow：NavDestination组件布局显示之前执行，此时页面不可见（应用切换到前台不会触发）。
  • onShown：NavDestination组件布局显示之后执行，此时页面已完成布局。
  • onWillHide：NavDestination组件触发隐藏之前执行（应用切换到后台不会触发）。
  • onHidden：NavDestination组件触发隐藏后执行（非栈顶页面push进栈，栈顶页面pop出栈或应用切换到后台）。
  • onWillDisappear：NavDestination组件即将销毁之前执行，如果有转场动画，会在动画前触发（栈顶页面pop出栈）。
  • onDisappear（通用）：通用生命周期事件，NavDestination组件从组件树上卸载销毁时执行。
  • aboutToDisappear(自定义)：自定义组件析构销毁之前执行，不允许在该方法中改变状态变量。

页面监听和查询

为了方便组件跟页面解耦，在NavDestination子页面内部的自定义组件可以通过全局方法监听或查询到页面的一些状态信息。

页面信息查询

自定义组件提供queryNavDestinationInfo方法，可以在NavDestination内部查询到当前所属页面的信息，返回值为NavDestinationInfo，若查询不到则返回undefined。

   import { uiObserver } from '@kit.ArkUI';// NavDestination内的自定义组件@Componentstruct MyComponent {navDesInfo: uiObserver.NavDestinationInfo | undefinedaboutToAppear(): void {this.navDesInfo = this.queryNavDestinationInfo();}build() {Column() {Text("所属页面Name: " + this.navDesInfo?.name)}.width('100%').height('100%')}}

页面状态监听

通过observer.on('navDestinationUpdate')提供的注册接口可以注册NavDestination生命周期变化的监听，使用方式如下：

   import { uiObserver } from '@kit.ArkUI';uiObserver.on('navDestinationUpdate', (info) => {console.info('NavDestination state update', JSON.stringify(info));});

也可以注册页面切换的状态回调，能在页面发生路由切换的时候拿到对应的页面信息NavDestinationSwitchInfo，并且提供了UIAbilityContext和UIContext不同范围的监听：

// 在UIAbility中使用import { UIContext, uiObserver } from '@kit.ArkUI';// callBackFunc 是开发者定义的监听回调函数function callBackFunc(info: uiObserver.NavDestinationSwitchInfo) {}uiObserver.on('navDestinationSwitch', this.context, callBackFunc);// 可以通过窗口的getUIContext()方法获取对应的UIContentuiContext: UIContext | null = null;uiObserver.on('navDestinationSwitch', this.uiContext, callBackFunc);

页面转场

Navigation默认提供了页面切换的转场动画，通过页面栈操作时，会触发不同的转场效果（Dialog类型的页面默认无转场动画），Navigation也提供了关闭系统转场、自定义转场以及共享元素转场的能力。

关闭转场

全局关闭：Navigation通过NavPathStack中提供的disableAnimation方法可以在当前Navigation中关闭或打开所有转场动画。

   pageStack: NavPathStack = new NavPathStack()aboutToAppear(): void {this.pageStack.disableAnimation(true)}

单次关闭： NavPathStack中提供的Push、Pop、Replace等接口中可以设置animated参数，默认为true表示有转场动画，需要单次关闭转场动画可以置为false，不影响下次转场动画。

pageStack: NavPathStack = new NavPathStack()this.pageStack.pushPath({ name: "PageOne" }, false)
this.pageStack.pop(false)

自定义转场

共享元素转场

Router切换Navigation

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。Router模块通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。
组件导航 (Navigation)具有更强的功能和自定义能力，推荐使用该组件作为应用的路由框架。

二者对比

都支持跳转HSP中页面、跳转HAR中页面、 跳转传参、跳转单例页面、页面返回、页面返回传参、返回指定路由、转场动画等
差别在于：

业务场景NavigationRouter
一多能力支持，Auto模式自适应单栏跟双栏显示不支持
跳转指定页面pushPath & pushDestinationpushUrl & pushNameRoute
获取指定页面参数支持不支持
传参类型传参为对象形式传参为对象形式，对象中暂不支持方法变量
页面返回弹窗支持，通过路由拦截实现showAlertBeforeBackPage
路由替换replacePath & replacePathByNamereplaceUrl & replaceNameRoute
路由栈清理clearclear
清理指定路由removeByIndexes & removeByName不支持
自定义转场动画支持支持，动画类型受限
屏蔽转场动画支持全局和单次支持 设置pageTransition方法duration为0
geometryTransition共享元素动画支持（NavDestination之间共享）不支持
页面生命周期监听UIObserver.on(‘navDestinationUpdate’)UIObserver.on(‘routerPageUpdate’)
获取页面栈对象支持不支持
路由拦截支持通过setInercption做路由拦截不支持
路由栈信息查询支持getState() & getLength()
路由栈move操作moveToTop & moveIndexToTop不支持
沉浸式页面支持不支持，需通过window配置
设置页面标题栏（titlebar）和工具栏（toolbar）支持不支持
模态嵌套路由支持不支持

切换指导：here。

跨包动态路由

通过静态import页面再进行路由跳转的方式会造成不同模块之间的依赖耦合，以及首页加载时间长等问题。
动态路由设计的目的就是为了解决多个模块（HAR/HSP）之间可以复用相同的业务，各个业务模块之间解耦和路由功能扩展整合。

动态路由的优势：

  1. 路由定义除了跳转的URL以外，可以丰富的配置扩展信息，如横竖屏默认模式，是否需要鉴权等等，做路由跳转时统一处理。
  2. 给每个路由页面设置一个名字，按照名称进行跳转而不是文件路径。
  3. 页面的加载可以使用动态Import（按需加载），防止首个页面加载大量代码导致卡顿。

动态路由提供系统路由表和自定义路由表两种方式。

  1. 系统路由表相对自定义路由表，使用更简单，只需要添加对应页面跳转配置项，即可实现页面跳转。
  2. 自定义路由表使用起来更复杂，但是可以根据应用业务进行定制处理。

支持自定义路由表和系统路由表混用。

系统路由表

从API version 12开始，Navigation支持使用系统路由表的方式进行动态路由。各业务模块（HSP/HAR）中需要独立配置router_map.json文件，在触发路由跳转时，应用只需要通过NavPathStack提供的路由方法，传入需要路由的页面配置名称，此时系统会自动完成路由模块的动态加载、页面组件构建，并完成路由跳转，从而实现了开发层面的模块解耦。

其主要步骤如下：

  1. 在跳转目标模块的配置文件module.json5添加路由表配置：
 {"module" : {"routerMap": "$profile:route_map"}
}

在这里插入图片描述

  1. 添加完路由配置文件地址后，需要在工程resources/base/profile中创建route_map.json文件。添加如下配置信息：
{"routerMap": [{"name": "PageOne",//跳转页面名称"pageSourceFile": "src/main/ets/pages/PageOne.ets",//跳转目标页在包内的路径，相对src目录的相对路径。"buildFunction": "PageOneBuilder",//跳转目标页的入口函数名称，必须以@Builder修饰。"data": {//data：应用自定义字段。可以通过配置项读取接口getConfigInRouteMap获取。"description" : "this is PageOne"}}]
}
  1. 在跳转目标页面中，需要配置入口Builder函数，函数名称需要和router_map.json配置文件中的buildFunction保持一致，否则在编译时会报错。
 // 跳转页面入口函数 (子页面)@Builderexport function PageOneBuilder() {//跳转目标页的入口函数名称,须以@Builder修饰。PageOne()}@Componentstruct PageOne {pathStack: NavPathStack = new NavPathStack()build() {NavDestination() {。。。}.title('PageOne').onReady((context: NavDestinationContext) => {this.pathStack = context.pathStack})}}
  1. 通过pushPathByName等路由接口进行页面跳转。(注意：此时Navigation中可以不用配置navDestination属性)
 @Entry//主页面@Componentstruct Index {pageStack : NavPathStack = new NavPathStack();//创建一个页面栈对象build() {Navigation(this.pageStack){//绑定页面栈对象}.onAppear(() => {this.pageStack.pushPathByName("PageOne", null, false);}).hideNavBar(true)}}

完成以上四步，但是一直跳转失败。。。继续找原因中。

自定义路由表

详情参见：here。

实现方案：

  1. 定义页面跳转配置项。
  • 使用资源文件进行定义，通过资源管理@ohos.resourceManager在运行时对资源文件解析。
  • 在ets文件中配置路由加载配置项，一般包括路由页面名称（即pushPath等接口中页面的别名），文件所在模块名称（hsp/har的模块名），加载页面在模块内的路径（相对src目录的路径）。
  1. 加载目标跳转页面，通过动态import将跳转目标页面所在的模块在运行时加载, 在模块加载完成后，调用模块中的方法，通过import在模块的方法中加载模块中显示的目标页面，并返回页面加载完成后定义的Builder函数。
  2. 触发页面跳转，在Navigation的navDestination属性执行步骤2中加载的Builder函数，即可跳转到目标页面。

End

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/53739.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ApacheKafka中的设计

ApacheKafka中的设计

文章目录 1、介绍1_Kafka&MQ场景2_Kafka 架构剖析3_分区&日志4_生产者&消费者组5_核心概念总结6_顺写&mmap7_Kafka的数据存储形式 2、Kafka的数据同步机制1_高水位&#xff08;High Watermark&#xff09;2_LEO3_高水位更新机制4_副本同步机制解析5_消息丢失问…
阅读更多...
ollama 本地部署

ollama 本地部署

ollama 本地模型部署 下载安装: [link](https://ollama.com/download)下载说明 部署使用在终端查看ollama是否安装完成终端查看ollama 命令说明查看当前支持下载的模型启动对话模式默认情况下&#xff0c;ollama启动了server 的api访问功能 外部 api访问使用postman网页版本for…
阅读更多...
【MATLAB】模拟退火算法

【MATLAB】模拟退火算法

模拟退火算法的MATLAB实现 模拟退火算法简介模拟退火算法应用实例关于计算结果 模拟退火算法简介 1982年&#xff0c;Kirkpatrick 将退火思想引入组合优化领域&#xff0c;提出了一种能够有效解决大规模组合优化问题的算法&#xff0c;尤其对 NP 完全问题表现出显著优势。模拟…
阅读更多...
电商平台如何实现自动监控订单签收状态，加快资金划拨进程？

电商平台如何实现自动监控订单签收状态，加快资金划拨进程？

资金划拨作为交易流程的核心环节之一&#xff0c;直接关系到商家资金回笼的速度、消费者购物体验的满意度以及平台自身的信誉与稳定性。 区别于自营电商&#xff0c;电商平台入驻了许多第三方商家&#xff0c;为了保障交易安全和控制风险&#xff0c;在交易未完成之前&#xff…
阅读更多...
超声波测距模块HC-SR04（基于STM32F103C8T6HAL库）

超声波测距模块HC-SR04（基于STM32F103C8T6HAL库）

超声波测距模块参考资料 1.电路连接及引脚配置 触发信号PA3只需要输出10us的高电平&#xff0c;所以直接设置成 普通的GPIO端口即可&#xff1b;回响信号使用外部中断&#xff0c;上升沿信号产生外部中断&#xff0c;打开定时器&#xff0c;下降沿再产生一次中断&#xff0c;读…
阅读更多...
数据丢失？别慌！EasyRecovery带你轻松寻回！

数据丢失？别慌！EasyRecovery带你轻松寻回！

&#x1f31f; 意外总在不经意间降临 &#x1f31f; 亲爱的小伙伴们&#xff0c;你是否有过这样的经历&#xff1a;正专心致志地处理着电脑文件&#xff0c;突然一次误操作&#xff0c;重要的资料就这样不见了&#xff0c;那种心如刀绞的感觉瞬间涌上心头。&#x1f616; 使用…
阅读更多...
MySQL事务【后端 13】

MySQL事务【后端 13】

MySQL事务 在数据库管理系统中&#xff0c;事务&#xff08;Transaction&#xff09;是一个非常重要的概念&#xff0c;它确保了数据库操作的完整性和一致性。MySQL作为一种流行的关系型数据库管理系统&#xff0c;自然也支持事务处理。本文将深入探讨MySQL事务的基本概念、特性…
阅读更多...
StorageSync数据缓存API

StorageSync数据缓存API

uni.setStorageSyncs参数:将 data 存储在本地缓存中指定的 key 中&#xff0c;会覆盖掉原来该 key 对应的内容&#xff0c;这是一个同步接口。 uni.setStorageSync函数里面写两个参数,分别是key和值,两个参数名称可以随便取,如果有同名的key,那么后面key的值会覆盖掉前面key的值…
阅读更多...
毫欧表设计整体思路

毫欧表设计整体思路

原因 对于焊接设备的低阻值测量&#xff0c;一般都是mΩ级别的&#xff0c;但万用表的电阻档一般都是以200Ω做为最小档位 设计原理及软件实现设计 设计思路原理图 通过串联在电路中的电流相等&#xff0c;根据阻值和电压的关系得到电阻对应大小 设计中需要考虑的问题 1…
阅读更多...
Why I‘m getting 404 Resource Not Found to my newly Azure OpenAI deployment?

Why I‘m getting 404 Resource Not Found to my newly Azure OpenAI deployment?

题意&#xff1a;为什么我新部署的Azure OpenAI服务会出现404资源未找到的错误&#xff1f; 问题背景&#xff1a; Ive gone through this quickstart and I created my Azure OpenAI resource created a model deployment which is in state succeedded. I also playaround …
阅读更多...
【C++ Primer Plus习题】14.3

【C++ Primer Plus习题】14.3

大家好,这里是国中之林! ❥前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。有兴趣的可以点点进去看看← 问题: 解答: main.cpp #include <iostream> #include "queuetp.h&quo…
阅读更多...
JavaWeb后端开发总结（3）

JavaWeb后端开发总结（3）

AOP基础 AOP概述 首先我们要知道AOP是什么&#xff1f; 看下图 个人解析&#xff1a; AOP叫做面向切面编程&#xff0c;但是实际上就是面向方法编程 图中下面一部分是一个AOP的案例 AOP快速入门案例代码实现 案例&#xff1a;测出业务中各个业务方法所需的执行时间 如果…
阅读更多...
进程与计划任务

进程与计划任务

top 查看进程 x users 表示有几个shell开启 x stopped 前台任务在后台暂停firefox & 在后台运行&#xff0c;不在前面显示 ​​​​​​​这种方式常用于需要长时间运行且不需要即时交互的程序或命令&#xff0c;以便用户可以在终端中使用其他命令或进行其他操作&#…
阅读更多...
Linux平台屏幕|摄像头采集并实现RTMP推送两种技术方案探究

Linux平台屏幕|摄像头采集并实现RTMP推送两种技术方案探究

技术背景 随着国产化操作系统的推进&#xff0c;市场对国产化操作系统下的生态构建&#xff0c;需求越来越迫切&#xff0c;特别是音视频这块&#xff0c;今天我们讨论的是如何在linux平台实现屏幕|摄像头采集&#xff0c;并推送至RTMP服务。 我们知道&#xff0c;Linux平台&…
阅读更多...
debug对于开发工程师很重要

debug对于开发工程师很重要

在日常开发中&#xff0c;总会遇到一些出人意料的bug&#xff0c;程序跑飞&#xff0c;上电就挂&#xff0c;程序没有按预期执行诸如此类的问题&#xff0c;没有好的调试方法&#xff0c;真的很难定位问题&#xff0c;更别说解决了。在这里分享我用过的一些调试方法&#xff0c…
阅读更多...
“论剑”智算时代，长沙已经站在计算产业的“华山之巅”

“论剑”智算时代，长沙已经站在计算产业的“华山之巅”

文 | 智能相对论 作者 | 陈泊丞 共赴全新十年之约&#xff0c;长沙又来搞大事情了&#xff01; 2024互联网岳麓峰会以“AI汇湘江 数智领航未来”为主题&#xff0c;全面聚焦在“AI”时代把握数字化、网络化、智能化发展机遇&#xff0c;积极响应当前人工智能技术迅猛发展的势…
阅读更多...
Qt5.4.1连接odbc驱动操作达梦数据库

Qt5.4.1连接odbc驱动操作达梦数据库

Qt5.4.1连接odbc驱动操作达梦数据库 1 环境介绍2 Qt5.4.1 安装2.1 图形化界面安装Qt5.4.12.2 配置Qt5.4.1 环境变量2.3 Qt5.4.1 生成 libqsqlodbc.so 并配置2.3.1 生成Makefile2.3.2 查看 libqsqlodbc.so 文件并配置 3 配置Qt测试用例4 达梦数据库学习使用列表 1 环境介绍 CPU…
阅读更多...
实现卷积层的前向传播（Pythom版）

实现卷积层的前向传播（Pythom版）

在TensorFlow框架中&#xff0c;实现卷积层&#xff08;2维&#xff09;的代码是 tf.keras.layers.Conv2D()。它主要接收如下几个参数&#xff0c; filters&#xff1a;卷积核的个数&#xff0c;也就是卷积层输出的通道数&#xff08;沿axis-1的维度&#xff09; kernel_size&a…
阅读更多...
性能碾压pandas、polars的数据分析神器来了

性能碾压pandas、polars的数据分析神器来了

来源&#xff1a;python大数据分析 费弗里 1 简介 就在几天前&#xff0c;经过六年多的持续开发迭代&#xff0c;著名的开源高性能分析型数据库DuckDB发布了其1.0.0正式版本。 DuckDB具有极强的单机数据分析性能表现&#xff0c;功能丰富&#xff0c;具有诸多拓展插件&#xf…
阅读更多...
时空特征融合方向小论文创新点一次性都给你！看到就是赚到

时空特征融合方向小论文创新点一次性都给你！看到就是赚到

朋友们&#xff0c;今天给大家推荐一个发小论文很不错的方向&#xff1a;时空特征融合。 时空特征融合是一种提高模型性能和准确性的关键技术&#xff0c;通过结合空间和时间维度的信息&#xff0c;它可以显著提高模型的预测精度和泛化能力&#xff0c;给我们提供更全面的数据…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023