【HarmonyOS】HMRouter使用详解（二）

2025-07-26 15:41:00

【HarmonyOS】HMRouter使用详解（二）路由跳转HMRouter中使用HMRouterMgr的静态方法push()和replace()来实现路由跳转。使用pop()方法来实现页面返回push ：目标页面不会替换当前页，而是插入页面栈。可以使用pop实现页面的返回操作。replace：目标页面会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。pop：返回页面栈

【HarmonyOS】HMRouter使用详解（二）

路由跳转

HMRouter中使用HMRouterMgr的静态方法push()和replace()来实现路由跳转。使用pop()方法来实现页面返回

push ：目标页面不会替换当前页，而是插入页面栈。可以使用pop实现页面的返回操作。
replace：目标页面会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。
pop：返回页面栈的上一个页面，skipedLayerumber 页面返回的层级数量，默认为0，表示返回上一级，1表示跳过一级页面返回

代码语言：javascript代码运行次数：0运行复制

static push(pathInfo: HMRouterPathInfo, callback?: HMRouterPathCallback): void;

static replace(pathInfo: HMRouterPathInfo, callback?: HMRouterPathCallback): void;

static pop(pathInfo?: HMRouterPathInfo, skipedLayerumber?: number): void;

跳转示例代码

push

代码语言：javascript代码运行次数：0运行复制

              HMRouterMgr.push({
                navigationId: "mainavigation",
                pageUrl: "TwoPage"
              })

replace

代码语言：javascript代码运行次数：0运行复制

          HMRouterMgr.replace({
            navigationId: "mainavigation",
            pageUrl: "ThreePage"
          })

携带参数跳转

代码语言：javascript代码运行次数：0运行复制

              HMRouterMgr.push({
                navigationId: "mainavigation",
                pageUrl: "TwoPage",
                param: new PageModel("张三", "12")
              })

PageModel代码语言：javascript代码运行次数：0运行复制

export class PageModel {
  ame?:string
  Age?:string
  ctructor(ame: string, Age: string) {
    this.ame = ame
    this.Age = Age
  }
}

HomePage代码语言：javascript代码运行次数：0运行复制

import { HMDefaultGlobalAnimator, HMavigation, HMRouter, HMRouterMgr } from '@hadss/hmrouter';
import { AttributeUpdater } from '@kit.ArkUI';
import { PageModel } from '../../Models/PageModel'

@Entry
@Component
struct HomePage {
  modifier: avModifier = new avModifier();

  build() {
    // @Entry中需要再套一层容器组件,Column或者Stack
    Column() {
      // 使用HMavigation容器
      HMavigation({
        navigationId: 'mainavigation', opti: {
          standardAnimator: HMDefaultGlobalAnimator.STADARD_AIMATOR,
          dialogAnimator: HMDefaultGlobalAnimator.DIALOG_AIMATOR,
          modifier: 
        }
      }) {
        Column({ space: 20 }) {
          Button("TwoPage")
            .width("80%")
            .onClick(() => {
              HMRouterMgr.push({
                navigationId: "mainavigation",
                pageUrl: "TwoPage"
              })
            })
          Button("TwoPageParam")
            .width("80%")
            .onClick(() => {
              HMRouterMgr.push({
                navigationId: "mainavigation",
                pageUrl: "TwoPage",
                param: new PageModel("张三", "12")
              })
            })
        }
        .width('100%')
        .height('100%')
      }
    }
    .height('100%')
    .width('100%')
  }
}

class avModifier extends AttributeUpdater<avigationAttribute> {
  initializeModifier(instance: avigationAttribute): void {
    (avigationMode.Stack);
    ('100%');
    instance.hideTitleBar(true);
    instance.hideToolBar(true);
  }
}

TwoPage代码语言：javascript代码运行次数：0运行复制

import { HMRouter, HMRouterMgr } from '@hadss/hmrouter'
import { PageModel } from '../../Models/PageModel'

@HMRouter({ pageUrl: "TwoPage" })
@Component
export struct TwoPage {
  aboutToAppear(): void {
    let currentParam: PageModel = HMRouterMgr.getCurrentParam() as PageModel;
    if (currentParam == undefined) {
      return;
    }
    cole.debug("param", 'name:' + currentParam.ame);
    cole.debug("param", 'age:' + currentParam.Age);
  }

  build() {
    Column({ space: 20 }) {
      Button("ThreePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.push({
            navigationId: "mainavigation",
            pageUrl: "ThreePage"
          })
        })
      Button("ThreeReplacePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.replace({
            navigationId: "mainavigation",
            pageUrl: "ThreePage"
          })
        })
      Button("HomePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.pop({
            navigationId: "mainavigation"
          })
        })
    }
    .height("100%")
    .width("100%")
  }
}

ThreePage代码语言：javascript代码运行次数：0运行复制

import { HMRouter, HMRouterMgr } from '@hadss/hmrouter'

@HMRouter({ pageUrl: "ThreePage" })
@Component
export struct ThreePage {
  build() {
    Column() {
      Button("ThreePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.pop({
            navigationId: "mainavigation"
          })
        })
    }
    .height("100%")
    .width("100%")
  }
}

实现页面跳转结果如下：

HMRouterPathInfo

路由跳转接口参数类，属性如下：

属性	类型	简介
navigationId	string	操作页面栈，为空时表示对最近一次操作的navigation进行路由跳转
pageUrl	string	需要跳转的目标页面
param	ESObject	跳转页面携带的参数
interceptors	IHMInterceptor[]	自定义，最高优先级执行
animator	IHMAnimator	boolean	自定义动画，使用传入的动画进行转场，传入false时将禁用动画
skipAllInterceptor	boolean	是否跳过所有执行，但是不会跳过interceptors中的

获取路由的参数

通过HMRouterMgr.getCurrentParam()方法来获取页面传递的数据。通过push和replace的callback参数来实现页面返回的命令触发。

代码语言：javascript代码运行次数：0运行复制

    static getCurrentParam(): Object | null;

修改上一章代码

TwoPage代码语言：javascript代码运行次数：0运行复制

import { HMPopInfo, HMRouter, HMRouterMgr } from '@hadss/hmrouter'
import { PageModel } from '../../Models/PageModel'

@HMRouter({ pageUrl: "TwoPage" })
@Component
export struct TwoPage {
  aboutToAppear(): void {
    let currentParam: PageModel = HMRouterMgr.getCurrentParam() as PageModel;
    if (currentParam == undefined) {
      return;
    }
    cole.debug("router", 'name:' + currentParam.ame);
    cole.debug("router", 'age:' + currentParam.Age);
  }

  build() {
    Column({ space: 20 }) {
      Button("ThreePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.push({
            navigationId: "mainavigation",
            pageUrl: "ThreePage"
          }, {
            onResult: (popInfo: HMPopInfo) => {
              let popResult: PageModel = popInfo.result as PageModel;
              if (popResult == null || popResult == undefined) {
                return;
              }
              cole.debug("router", 'name:' + popResult.ame);
              cole.debug("router", 'age:' + popResult.Age);
            }
          })
        })
      Button("ThreeReplacePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.replace({
            navigationId: "mainavigation",
            pageUrl: "ThreePage"
          })
        })
      Button("HomePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.pop({
            navigationId: "mainavigation"
          })
        })
    }
    .height("100%")
    .width("100%")
  }
}

ThreePage代码语言：javascript代码运行次数：0运行复制

import { HMRouter, HMRouterMgr } from '@hadss/hmrouter'
import { PageModel } from '../../Models/PageModel'

@HMRouter({ pageUrl: "ThreePage" })
@Component
export struct ThreePage {
  build() {
    Column() {
      Button("ThreePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.pop({
            navigationId: "mainavigation",
            param: new PageModel("李四", "18")
          })
        })
    }
    .height("100%")
    .width("100%")
  }
}

实现以下效果

把传递的参数打印出来。

push和replace切换路由传递

pop回传

总结

这篇文章主要讲了路由切换相关的内容。同时需要注意，即使是Replace切换到下一个页面，页面返回时也是调用Replace的回调函数。

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1224261.html

本站网友轮廓光	4分钟前发表
callback?
本站网友南京店面	21分钟前发表
new PageModel("张三"
本站网友同仁堂网上药店	8分钟前发表
modifier
本站网友台州火车站	22分钟前发表
param
本站网友成都投资公司	0秒前发表
即使是Replace切换到下一个页面
本站网友深圳无痛人流	11分钟前发表
{ onResult
本站网友打死你打死你	2分钟前发表
' + popResult.ame); cole.debug("router"
本站网友博雅立方	4分钟前发表
pageUrl
本站网友通用汽车召回	16分钟前发表
PageModel = HMRouterMgr.getCurrentParam() as PageModel; if (currentParam == undefined) { return; } cole.debug("param"
本站网友 usb驱动程序下载	18分钟前发表
' + currentParam.ame); cole.debug("param"
本站网友污垢	25分钟前发表
"mainavigation"
本站网友皇家加勒比国际游轮	19分钟前发表
modifier

【HarmonyOS】HMRouter使用详解（二）