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

news2024/9/20 0:53:13

组件导航 (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()
  页面栈对象传入Navigation
  Navigation(this.pageInfos) {
     List({ space: 12 }) {
       ForEach(this.arr, (item:string) => {
         ListItem() {
           Text("NavRouter" + item)
           ...
             .onClick(()=>{  // 点击跳转 页面路由操作，参见下文详解  pushPath  name
               this.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.创建一个页面栈对象并传入Navigation
  pageStack: 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的路由重定向到PageOne
    let 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内的自定义组件
     @Component
     struct MyComponent {
       navDesInfo: uiObserver.NavDestinationInfo | undefined

       aboutToAppear(): 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()方法获取对应的UIContent
 uiContext: 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保持一致，否则在编译时会报错。
 // 跳转页面入口函数 (子页面)
  @Builder
  export function PageOneBuilder() {//跳转目标页的入口函数名称,须以@Builder修饰。
    PageOne()
  }
  @Component
  struct PageOne {
    pathStack: NavPathStack = new NavPathStack()
    build() {
      NavDestination() {。。。}
      .title('PageOne')
      .onReady((context: NavDestinationContext) => {
         this.pathStack = context.pathStack
      })
    }
  }
  1. 通过pushPathByName等路由接口进行页面跳转。(注意：此时Navigation中可以不用配置navDestination属性)
 @Entry
 //主页面
  @Component
  struct 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.coloradmin.cn/o/2125790.html

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

相关文章

【论文阅读笔记】Tackling the Generative Learning Trilemma with Denoising Diffusion GANs

【论文阅读笔记】Tackling the Generative Learning Trilemma with Denoising Diffusion GANs

【论文阅读笔记】Tackling the Generative Learning Trilemma with Denoising Diffusion GANs Introduction方法 使用传统GANS建模去噪分布理解模式覆盖率 Paper&#xff1a;https://arxiv.org/abs/2112.07804 Code&#xff1a;https://github.com/NVlabs/denoising-diffusion-…
阅读更多...
大模型LLM部署学习

大模型LLM部署学习

1、推理工具vLLM vLLM使用指北 https://zhuanlan.zhihu.com/p/685621164 VLLM官方文档 Welcome to vLLM! — vLLM 2、RAG&#xff08;检索增强生成&#xff09; https://zhuanlan.zhihu.com/p/675509396 RAG就是通过检索获取相关的知识并将其融入Prompt&#xff0c;让大模…
阅读更多...
企业预算管理的数字化转型

企业预算管理的数字化转型

在当今激烈的市场竞争中&#xff0c;企业面临着前所未有的挑战&#xff0c;尤其在成本控制和资源配置方面&#xff0c;预算管理成为企业成功运营的关键。然而&#xff0c;传统的预算管理方式&#xff0c;尤其依赖于Excel等工具的操作&#xff0c;随着企业规模的扩大和业务复杂度…
阅读更多...
13步指南：如何建立品牌社区（附真实案例）

13步指南：如何建立品牌社区（附真实案例）

如果你正在寻找增强客户忠诚度、降低营销费用&#xff0c;并直接从客户那边获取创新想法的方法&#xff0c;那么创建一个品牌社区可能非常适合你。在这里&#xff0c;我们还推荐使用光年AI&#xff0c;将两者结合可以事半功倍。 例如&#xff0c;丝芙兰的美妆爱好者社区自2017…
阅读更多...
SAP Fiori UI5-环境搭建-2022-2024界面对比

SAP Fiori UI5-环境搭建-2022-2024界面对比

文章目录 一、Fiori项目初始化实际操作第一步&#xff1a;新建文件夹&#xff08;项目文件&#xff09;第二步&#xff1a;打开我们项目第三步&#xff1a;打开终端 部署环境第四步: XML中新增文本 二、 2023年Vscode中Fiori界面三 、2024年Vscode中Fiori界面 一、Fiori项目初始…
阅读更多...
上海徐汇区开启大模型备案奖励申报

上海徐汇区开启大模型备案奖励申报

上海徐汇区开启大模型备案奖励申报 徐汇区作为全国首批人工智能战略性新兴产业集群&#xff0c;敏锐地抓住了通用人工智能的变革趋势和产业风口&#xff0c;率先打造了全国首个大模型创新生态社区“模速空间”&#xff0c;并创建了上海人工智能大模型创新生态集聚区。为了进一步…
阅读更多...
2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码

2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码

一、端口说明、域名解析及服务器配置要求 1.1端口说明 使用二级域名映射的情况下 使用端口说明3306数据导入是可以开放 后期关闭 或者直接在服务器上面导入6379不用对外开放9903需要开放80需要开放 1.2 子域名说明&#xff1a; api.xxx.com接口 im.xxx.com通讯 web.xxx.…
阅读更多...
Go跨平台Wails框架入门教程

Go跨平台Wails框架入门教程

前言 Go跨平台Wails UI应用框架是一个强大的工具&#xff0c;它允许开发者利用Go语言的性能优势和Web技术的灵活性来构建跨平台的桌面应用程序。以下是一个详细的Wails应用框架应用教程及相关示例的概述。 一、Wails简介 Wails是一个开源项目&#xff0c;旨在让开发者能够使…
阅读更多...
2024.9 学习笔记

2024.9 学习笔记

9.10 1.大地坐标系 大地坐标系&#xff08;Geodetic Coordinate System&#xff09;: 定义: 基于地球表面&#xff0c;通常使用经度、纬度和高度来描述位置。也可以称为东北天&#xff08;XYZ轴&#xff09;用途: 常用于地图制作、地理信息系统&#xff08;GIS&#xff09;和…
阅读更多...
基于 NIM 建构多模态 AI-Agent （代码解析）

基于 NIM 建构多模态 AI-Agent （代码解析）

本次课程将着重介绍一下内容: 多模态模型基于 NIM 的调用方式基于 NIM 接口实现 Phi-3-Vision 的推理实践基于 Gradio 框架建立前端互动界面 申请NIM的API Key&#xff0c;来调用NIM的计算资源 进入NVIDIA NIM | phi-3-vision-128k-instruct, 点击Get API Key按钮&#xff0…
阅读更多...
SpringBootWeb案例（续）

SpringBootWeb案例（续）

书接上回&#xff0c;上篇文章CSDN 复习了部门管理功能的开发。这篇文章来复习员工管理模块功能开发 基于以上页面原型&#xff0c;我们可以把员工管理功能分为&#xff1a; 分页查询&#xff08;重点&#xff09; 带条件的分页查询&#xff08;重点&#xff09; 删除员工 新…
阅读更多...
泰语快速学习方法！速成方法学习！

泰语快速学习方法！速成方法学习！

要快速学习泰语&#xff0c;可以采取多种策略&#xff0c;如掌握基础语法和词汇&#xff0c;专注于发音练习以掌握泰语特有的音调系统&#xff0c;利用语言学习软件进行互动学习&#xff0c;通过观看泰语媒体内容提高听力理解&#xff0c;与母语者进行语言交换来锻炼口语&#…
阅读更多...
GDB 查看汇编

GDB 查看汇编

查看汇编 x disassemble
阅读更多...
MySQL 按照条件（分组）只取一个形成列表 group max

MySQL 按照条件（分组）只取一个形成列表 group max

方法一、通过Max形成where条件 SELECTt1.* FROMbiz_customer_hold AS t1 WHEREt1.ch_create_time ( SELECT MAX( ch_create_time ) FROM biz_customer_hold AS t2 WHERE t2.ch_cust_no t1.ch_cust_no ) ORDER BYt1.ch_create_time DESC,t1.ch_hold_time DESC 方法二、通…
阅读更多...
部署TC服务 服务集成Seata

部署TC服务 服务集成Seata

一、部署TC服务 tc在管理全局事务和分支事务是需要记录&#xff0c;最好放在数据库中持久保存 1.创建数据库表 创建一个名为Seata的库建立四张表 语句如下 CREATE DATABASE IF NOT EXISTS seata; USE seata;CREATE TABLE IF NOT EXISTS global_table (xid …
阅读更多...
【PGCCC】Postgres 17 中的 3 大特性

【PGCCC】Postgres 17 中的 3 大特性

一年又一年&#xff0c;Postgres 已成为世界上最受喜爱和最受信任的数据库 — Postgres 17将变得更好。即将发布的版本在开发人员体验和性能方面都有所改进。 Postgres 17 中的 3 大特性 #01 具有 RETURNING 支持的 MERGE 命令 它可以帮助需要处理条件数据修改而无需处理多…
阅读更多...
CMU 10423 Generative AI：HW1（理论部分）

CMU 10423 Generative AI：HW1（理论部分）

备注&#xff1a;S24版GitHub上有某CMU学生分享了自己的全套理论编程作业&#xff0c;以下内容的整理结合了我自己的理解查阅、GPT4的解答、以及CMU学生的答案。 文章目录 0 作业概述1 RNN语言模型1.1 问题1&#xff1a;Elman&#xff08;即RNN&#xff09; 网络模型条件输出问…
阅读更多...
IDEAJ真正修改maven(.m2)在Windows环境下缓存路径

IDEAJ真正修改maven(.m2)在Windows环境下缓存路径

IDEAJ真正修改maven(.m2)缓存路径的方法 下面这种方式虽然当前项目生效了&#xff0c;IntelliJ IDEA修改默认.m2和.gradle缓存路径-CSDN博客文章浏览阅读251次&#xff0c;点赞4次&#xff0c;收藏8次。文章浏览阅读1.3k次。1&#xff0c;File -ProjectStructure - Artifacts &…
阅读更多...
RISC-V （十二）系统调用

RISC-V （十二）系统调用

系统模式&#xff1a;用户态和内核态 当前的代码都是实现在machine模式下。 系统模式的切换 epc寄存器的值存放的是ecall指本身的地址 。 用ecall指令 系统调用的执行流程 mret这条指令会利用status的mpp值恢复到之前的特权级别。 蓝色的线表示涉及到权限切换。 系统调用的传…
阅读更多...
【VUE】pinia持久化存储

【VUE】pinia持久化存储

前言&#xff1a;状态持久化存储的意义在于它能够确保用户在与应用程序交互时&#xff0c;其操作状态、用户偏好、应用数据等关键信息在页面刷新、浏览器关闭或重新启动后依然得以保留&#xff0c;从而提供连贯、无缝的用户体验&#xff0c;避免因状态丢失导致的不便和重复操作…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023