鸿蒙界面开发——组件（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.rhkb.cn/news/422112.html

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

相关文章

2024年金九银十最新版Java面试题及答案整理（持续更新）

2024年金九银十最新版Java面试题及答案整理（持续更新）

2024年金九银十到了&#xff0c;发现网上很多Java面试题都没有答案&#xff0c;所以花了很长时间搜集整理出来了这套Java面试题大全~这套互联网 Java 工程师面试题包括了&#xff1a;MyBatis、ZK、Dubbo、EL、Redis、MySQL、并发编程、Java面试、Spring、微服务、Linux、Spring…
阅读更多...
文件加密最简单的方法有哪些？十个电脑文件加密方法【超详细】

文件加密最简单的方法有哪些？十个电脑文件加密方法【超详细】

在当今数字化和信息化的时代&#xff0c;数据已成为企业最重要的资产之一。内部数据外泄不仅可能导致商业秘密的丧失&#xff0c;还可能对企业的声誉和财务健康造成严重影响。为了有效防止内部数据外泄&#xff0c;企业需要实施综合的防泄密解决方案。以下是十大最佳防泄密解决…
阅读更多...
内网安全-横向移动【3】

内网安全-横向移动【3】

1.域横向移动-内网服务-Exchange探针 Exchange是一个电子右键服务组件&#xff0c;由微软公司开发。它不仅是一个邮件系统&#xff0c;还是一个消息与协作系统。Exchange可以用来构建企业、学校的邮件系统&#xff0c;同时也是一个协作平台&#xff0c;可以基于此开发工作流、…
阅读更多...
19：I2C一：程序模拟I2C通信时序

19：I2C一：程序模拟I2C通信时序

I2C 1、什么是I2C2、I2C的通信时序2.1&#xff1a;起始信号2.2&#xff1a;停止信号2.3&#xff1a;主机向从机发送一个字节数据2.4&#xff1a;主机向从机读取一个字节数据2.5&#xff1a;主机接收应答2.6&#xff1a;主机发送应答 3、程序模拟I2C的通信时序3.1&#xff1a;指…
阅读更多...
NX1872三维电气布线

NX1872三维电气布线

电气部件审核与定义
阅读更多...
Windows系统介绍

Windows系统介绍

文章目录 1、Windows启动过程1.1 启动过程BIOS1.2 启动过程MBR1.3 启动过程 GPT1.4 启动过程BootMgr1.5 启动过程Winload.exe1.6 启动过程1.7 explorer.exe 2、Windows重要进程及组件2.1 注册表Services注册表服务管理器Services.mscsc.exe计划任务taskschd.msc计划任务schtask…
阅读更多...
区块链学习笔记1--比特币

区块链学习笔记1--比特币

区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。 从狭义上来说&#xff1a;区块链是一种按照时间顺序将数据区块以顺序相连的方式组合成的一种链式数据结构&#xff0c;并以密码学的方式保证的不可篡改和不可伪造的分布式账本。 意思就是…
阅读更多...
第67期 | GPTSecurity周报

第67期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以找…
阅读更多...
组播 2024 9 11

组播 2024 9 11

PIM&#xff08;Protocol Independent Multicast&#xff09;是一种常用的组播路由协议&#xff0c;其独立于底层的单播路由协议&#xff0c;能够在多种网络环境中有效地实现多播路由功能。PIM主要有两种模式&#xff1a;PIM Sparse Mode (PIM-SM) 和 PIM Dense Mode (PIM-DM)&…
阅读更多...
DDoS对策是什么？详细解说DDoS攻击难以防御的理由和对策方法

DDoS对策是什么？详细解说DDoS攻击难以防御的理由和对策方法

攻击规模逐年增加的DDoS攻击。据相关调查介绍&#xff0c;2023年最大的攻击甚至达到了700Gbps。 为了抑制DDoS攻击的危害&#xff0c;采取适当的对策是很重要的。 特别是在网站显示花费时间或频繁出现504错误的情况下&#xff0c;可能已经受到了DDoS攻击&#xff0c;需要尽早采…
阅读更多...
Spring面试

Spring面试

一、对Spring的理解 &#xff08;一&#xff09;Spring的发展史 &#xff08;二&#xff09;Spring的体系结构 &#xff08;三&#xff09;Spring相关组件 1.Spring和SpringMVC的关系 2.Spring和SpringBoot的关系 3.Spring和SpringCloud的关系 4.Spring和SpringSecurity的…
阅读更多...
C语言基础——⑩③数据结构——②栈和队列

C语言基础——⑩③数据结构——②栈和队列

一、栈(Stack) 1、基本概念 栈是一种逻辑结构&#xff0c;是特殊的线性表。特殊在&#xff1a; 只能在固定的一端操作 只要满足上述条件&#xff0c;那么这种特殊的线性表就会呈现一种“后进先出”的逻辑&#xff0c;这种逻辑就被称为栈。栈 在生活中到处可见&#xff0c;比…
阅读更多...
为什么企业需要数据目录？

为什么企业需要数据目录？

想象一下&#xff0c;如果在没有目录系统的庞大图书馆里寻找一本特定的书&#xff0c;你可能会耗费无数个小时搜索&#xff0c;但最终却一无所获。 同理&#xff0c;企业的数据如果没有一个组织良好、易于搜索的系统&#xff0c;也无法充分发挥其潜力。企业数据目录能够简化这一…
阅读更多...
Kafka 基础与架构理解

Kafka 基础与架构理解

目录 前言 Kafka 基础概念 消息队列简介&#xff1a;Kafka 与传统消息队列&#xff08;如 RabbitMQ、ActiveMQ&#xff09;的对比 Kafka 的组件 Kafka 的工作原理&#xff1a;消息的生产、分发、消费流程 Kafka 系统架构 Kafka 的分布式架构设计 Leader-Follower 机制与…
阅读更多...
进击J6：ResNeXt-50实战

进击J6：ResNeXt-50实战

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、实验目的&#xff1a; 阅读ResNeXt论文&#xff0c;了解作者的构建思路对比之前介绍的ResNet50V2、DenseNet算法使用ResNeXt-50算法完成猴痘病识别 二、实…
阅读更多...
jmeter之仅一次控制器

jmeter之仅一次控制器

仅一次控制器作用&#xff1a; 不管线程组设置多少次循环&#xff0c;它下面的组件都只会执行一次 Tips&#xff1a;很多情况下需要登录才能访问其他接口&#xff0c;比如&#xff1a;商品列表、添加商品到购物车、购物车列表等&#xff0c;在多场景下&#xff0c;登录只需要…
阅读更多...
【EJB】会话Bean（Session Bean）

【EJB】会话Bean（Session Bean）

单例会话****bean在每个应用程序中实例化一次&#xff0c;并存在于应用程序的生命周期中。单例会话bean是为单个企业bean实例在客户端之间共享和并发访问的环境而设计的。 单例会话Bean提供了与无状态会话Bean相似的功能&#xff0c;但与它们不同&#xff0c;因为每个应用程序…
阅读更多...
【CanMV K230 AI视觉】人脸关键部位

【CanMV K230 AI视觉】人脸关键部位

【CanMV K230 AI视觉】人脸关键部位 人脸关键部位 &#xff08;动态测试效果可以去下面网站自己看。&#xff09; B站视频链接&#xff1a;已做成合集 抖音链接&#xff1a;已做成合集 人脸关键部位 人脸关键部位检测&#xff0c;主要检测脸部轮廓、眉毛、眼睛、鼻子和嘴巴&a…
阅读更多...
【Kubernetes】K8s 的鉴权管理（二）：基于属性 / 节点 / Webhook 的访问控制

【Kubernetes】K8s 的鉴权管理（二）：基于属性 / 节点 / Webhook 的访问控制

K8s 的鉴权管理&#xff08;二&#xff09;&#xff1a;基于属性 / 节点 / Webhook 的访问控制 1.基于属性的访问控制&#xff08;ABAC 鉴权&#xff09;2.基于节点的访问控制&#xff08;node 鉴权&#xff09;2.1 读取操作2.2 写入操作 3.基于 Webhook 的访问控制3.1 基于 We…
阅读更多...
什么是 Grafana？

什么是 Grafana？

什么是 Grafana&#xff1f; Grafana 是一个功能强大的开源平台&#xff0c;用于创建、查看、查询和分析来自多个来源的数据。通过可视化仪表盘&#xff08;Dashboard&#xff09;&#xff0c;它能够帮助用户监控实时数据、生成历史报告&#xff0c;甚至进行预测分析。Grafana…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023