首页 > 其他分享 >鸿蒙界面开发——组件（7）：组件导航 & 页面路由

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

时间：2024-09-10 10:56:33浏览次数：12  
标签：鸿蒙 NavDestination 跳转 组件 Navigation 路由 页面

组件导航 (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

标签：鸿蒙,NavDestination,跳转,组件,Navigation,路由,页面
From： https://blog.csdn.net/littleyy666/article/details/141951798

相关文章

  • Taro 小程序父组件基于Class如何拿到子组件基于Hooks的实例对象
    如果父组件不是基于Hooks写法（类组件），而子组件是基于Hooks写法（函数组件），你依然可以通过ref访问子组件中的方法或状态。为此，你需要使用forwardRef和useImperativeHandle在子组件中自定义要暴露的内容。具体步骤在子组件中使用forwardRef将ref传递给它。在子组件中使......
  • .NET 8 微软免费开源的 Blazor UI 组件库
    前言.NET8的发布，微软推出了官方免费且开源的BlazorUI组件库——FluentUIBlazor。组件库提供了Web应用程序所需的工具，确保应用程序能够与Microsoft产品保持一致的外观和感觉。FluentUIBlazor不仅包含了对微软官方FluentUIWebComponents的封装，还提供了额外的组......
  • LLog:Spring轻量级请求日志监控组件，集成管理面板，支持多条件查询检索
    开源地址https://gitee.com/lboot/LLog简介LLog是基于AOP构建的请求日志记录和查询工具库，通过引入该工具库，完成配置，实现对接口请求日志的记录、查询检索等功能。请求状态、时间、来源、耗时，请求参数，响应结果，作用接口记录支持与鉴权服务结合，记录请求来源为用户ID通过注解......
  • Vue.js 组件设计详解
    在现代Web开发中，组件化设计已经成为构建可维护和可扩展应用程序的关键策略之一。而Vue.js作为一个流行的前端框架，以其简单易用、灵活和高效的特点，成为开发者的首选之一。本文将详细介绍如何设计Vue组件，涵盖从基础到高级的概念和实践，包括组件的创建、通信、复用、优化和......
  • Java代码审计篇 | ofcms系统审计思路讲解 - 篇1 | 环境搭建、路由机制
    文章目录Java代码审计篇|ofcms系统审计思路讲解-篇1|环境搭建、路由机制1.前言2.项目环境搭建3.项目路由机制3.1.1）先搜索pom.xml文件，看看使用了什么框架3.2.2）确定是否是spring的路由机制3.3.3）确定自写路由机制的特点3.4.4）从前端探索3.5.5）断点调试3.6.6）寻......
  • 京东鸿蒙上线前瞻——使用 Taro 打造高性能原生应用
    背景2024年1月，京东正式启动鸿蒙原生应用开发，基于HarmonyOSNEXT的全场景、原生智能、原生安全等优势特性，为消费者打造更流畅、更智能、更安全的购物体验。同年6月，京东鸿蒙原生应用尝鲜版上架华为应用市场，计划9月完成正式版的上架。早在2020年，京东与华为就签署......
  • Vue3使用icon组件不生效的问题（）
    首先确保项目中已经安装了ant-design-vue：npminstallant-design-vue@next--save#注意使用@next来安装Vue3兼容的版本#或者yarnaddant-design-vue@next在Vue组件中引入并使用图标：(单独导入)<template><divclass="overlay-table-close-btn"@click="toggle......
  • django 路由相关
    路由系统1常见操作通俗的语言来表示：URL->函数对应关系2路由源码分析2.1路由定义的本质fromdjango.urlsimportpath,re_pathfromapps.wwwimportviewsfromdjango.urlsimportURLPatternfromdjango.urls.resolversimportRoutePatternurlpatterns=[......
  • 安装部署tidb中的安装tidb-4000组件失败相关问题（环境为统信20操作系统
    1.安装时发现安装时间很久，停止之后报错，查看日志发现报错如下[2024/09/0914:08:52.509+08:00][FATAL][terror.go:309]["unexpectederror"][error="othererror:[components/tidb_query_datatype/src/expr/ctx.rs:89]:evaluationfailed:unknownorincorrecttimezon......
  • thanos rule组件和prometheus区别
    ThanosRuler和Prometheus在功能上有一些相似之处，但它们在设计目的、功能和使用场景上存在显著区别。以下是对这两个组件的详细比较：1.设计目的ThanosRuler：作为Thanos生态系统的一部分，ThanosRuler旨在提供高可用性和跨多个数据源的规则评估和告警功能。它可以与多......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99