AI 助理
备案控制台
开发者社区 云计算 文章 正文

【HarmonyOS】HMRouter使用详解（二）

2024-12-24 141
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： HMRouter中使用HMRouterMgr的静态方法push()和replace()来实现路由跳转。使用pop()方法来实现页面返回* push ：目标页面不会替换当前页，而是插入页面栈。可以使用pop实现页面的返回操作。* replace：目标页面会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。* pop：返回页面栈的上一个页面，skipedLayerNumber 页面返回的层级数量，默认为0，表示返回上一级，1表示跳过一级页面返回

路由跳转

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

  • push ：目标页面不会替换当前页，而是插入页面栈。可以使用pop实现页面的返回操作。
  • replace：目标页面会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。
  • pop：返回页面栈的上一个页面，skipedLayerNumber 页面返回的层级数量，默认为0，表示返回上一级，1表示跳过一级页面返回
static push(pathInfo: HMRouterPathInfo, callback?: HMRouterPathCallback): void;
static replace(pathInfo: HMRouterPathInfo, callback?: HMRouterPathCallback): void;
static pop(pathInfo?: HMRouterPathInfo, skipedLayerNumber?: number): void;

跳转示例代码

push

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

replace

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

携带参数跳转

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

PageModel

export class PageModel {
  Name?:string
  Age?:string
  constructor(Name: string, Age: string) {
    this.Name = Name
    this.Age = Age
  }
}

HomePage

import { HMDefaultGlobalAnimator, HMNavigation, HMRouter, HMRouterMgr } from '@hadss/hmrouter';
import { AttributeUpdater } from '@kit.ArkUI';
import { PageModel } from '../../Models/PageModel'
@Entry
@Component
struct HomePage {
  modifier: NavModifier = new NavModifier();
  build() {
    // @Entry中需要再套一层容器组件,Column或者Stack
    Column() {
      // 使用HMNavigation容器
      HMNavigation({
        navigationId: 'mainNavigation', options: {
          standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR,
          dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR,
          modifier: this.modifier
        }
      }) {
        Column({ space: 20 }) {
          Button("TwoPage")
            .width("80%")
            .onClick(() => {
              HMRouterMgr.push({
                navigationId: "mainNavigation",
                pageUrl: "TwoPage"
              })
            })
          Button("TwoPageParam")
            .width("80%")
            .onClick(() => {
              HMRouterMgr.push({
                navigationId: "mainNavigation",
                pageUrl: "TwoPage",
                param: new PageModel("张三", "12")
              })
            })
        }
        .width('100%')
        .height('100%')
      }
    }
    .height('100%')
    .width('100%')
  }
}
class NavModifier extends AttributeUpdater<NavigationAttribute> {
  initializeModifier(instance: NavigationAttribute): void {
    instance.mode(NavigationMode.Stack);
    instance.navBarWidth('100%');
    instance.hideTitleBar(true);
    instance.hideToolBar(true);
  }
}

TwoPage

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;
    }
    console.debug("param", 'name:' + currentParam.Name);
    console.debug("param", 'age:' + currentParam.Age);
  }
  build() {
    Column({ space: 20 }) {
      Button("ThreePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.push({
            navigationId: "mainNavigation",
            pageUrl: "ThreePage"
          })
        })
      Button("ThreeReplacePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.replace({
            navigationId: "mainNavigation",
            pageUrl: "ThreePage"
          })
        })
      Button("HomePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.pop({
            navigationId: "mainNavigation"
          })
        })
    }
    .height("100%")
    .width("100%")
  }
}

ThreePage

import { HMRouter, HMRouterMgr } from '@hadss/hmrouter'
@HMRouter({ pageUrl: "ThreePage" })
@Component
export struct ThreePage {
  build() {
    Column() {
      Button("ThreePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.pop({
            navigationId: "mainNavigation"
          })
        })
    }
    .height("100%")
    .width("100%")
  }
}

实现页面跳转结果如下：

HMRouterPathInfo

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

属性

类型

简介

navigationId

string

操作页面栈，为空时表示对最近一次操作的navigation进行路由跳转

pageUrl

string

需要跳转的目标页面

param

ESObject

跳转页面携带的参数

interceptors

IHMInterceptor[]

自定义拦截器，最高优先级执行

animator

IHMAnimator

boolean

skipAllInterceptor

boolean

是否跳过所有拦截器执行，但是不会跳过interceptors中的拦截器

获取路由的参数

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

static getCurrentParam(): Object | null;

修改上一章代码

TwoPage

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;
    }
    console.debug("router", 'name:' + currentParam.Name);
    console.debug("router", 'age:' + currentParam.Age);
  }
  build() {
    Column({ space: 20 }) {
      Button("ThreePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.push({
            navigationId: "mainNavigation",
            pageUrl: "ThreePage"
          }, {
            onResult: (popInfo: HMPopInfo) => {
              let popResult: PageModel = popInfo.result as PageModel;
              if (popResult == null || popResult == undefined) {
                return;
              }
              console.debug("router", 'name:' + popResult.Name);
              console.debug("router", 'age:' + popResult.Age);
            }
          })
        })
      Button("ThreeReplacePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.replace({
            navigationId: "mainNavigation",
            pageUrl: "ThreePage"
          })
        })
      Button("HomePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.pop({
            navigationId: "mainNavigation"
          })
        })
    }
    .height("100%")
    .width("100%")
  }
}

ThreePage

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: "mainNavigation",
            param: new PageModel("李四", "18")
          })
        })
    }
    .height("100%")
    .width("100%")
  }
}

实现以下效果

把传递的参数打印出来。

push和replace切换路由传递

pop回传

总结

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

关键词：
HarmonyOS hmrouter
64ml4hiqojt5k
目录
相关文章
程序员Feri
|
26天前
|
人工智能 Java 程序员
一文彻底拿下HarmonyOS实战开发之HMRouter实现跳转
本文介绍HarmonyOS页面跳转的两种方式：组件导航（Navigation）和页面路由（@ohos.router）。重点推荐使用组件导航，因其灵活性和多端部署能力更强。此外，还介绍了HMRouter，一个简化页面跳转的工具，支持自定义注解、路由拦截、动画配置等功能。通过详细步骤，展示了如何在项目中集成HMRouter并实现页面跳转，帮助开发者更高效地开发鸿蒙应用。君志所向，一往无前！关注我，带你起飞鸿蒙开发！
程序员Feri
61 0
64ml4hiqojt5k
|
3月前
|
容器
【HarmonyOS】HMRouter使用详解（一）环境配置
在项目中使用官方推荐的Navigation时，需要在所有的页面上都添加一层NavDestination，在代码阅读上会增加多个层级，而且还要在主页面设置对应名字的跳转等问题，配置起来比较繁琐。看到大佬开发的HMRouter使用起来方便简洁，因此，写下这篇文章记录HMRouter的使用。
64ml4hiqojt5k
135 8
【HarmonyOS】HMRouter使用详解（一）环境配置
64ml4hiqojt5k
|
3月前
|
监控
【HarmonyOS】HMRouter使用详解（三）生命周期
使用HMRouter的页面跳转时，想实现和Navigation一样的生命周期时，需要通过新建生命周期类来实现对页面对某一个生命周期的监控。
64ml4hiqojt5k
131 5
【HarmonyOS】HMRouter使用详解（三）生命周期
64ml4hiqojt5k
|
3月前
【HarmonyOS】HMRouter使用详解（四）路由拦截
可以对指定或全局路由跳转时添加拦截器，作用是可以实现在页面切换前做判断是否有进入当前页面的权限。这篇文章将实现登录的全局路由拦截样式。
64ml4hiqojt5k
106 2
程序员Feri
|
3月前
|
人工智能 Java 程序员
HarmonyOS实战开发之HMRouter实现跳转
本文介绍了HarmonyOS页面跳转的两种方式：组件导航（Navigation）和页面路由（@ohos.router），并推荐使用更灵活的组件导航。进一步详细讲解了HMRouter，一个解决HarmonyOS页面跳转问题的框架，其功能包括页面跳转、弹窗提示、转场动效等。通过下载依赖、配置插件、初始化和实现跳转四个步骤，可以轻松集成HMRouter，实现高效页面管理。文章还展示了具体代码示例和效果截图，帮助开发者快速上手。关注Feri，带你掌握鸿蒙开发技巧！
程序员Feri
224 1
程序员一鸣
|
3天前
|
JSON 数据安全/隐私保护 数据格式
鸿蒙开发，远场通信服务rcp拦截器问题
关于rcp的拦截器问题，最重要的就是会话复用的时候，如果Request对象中有需要的参数，就直接用Request中的，而不是使用session中的。
程序员一鸣
51 3
鸿蒙开发，远场通信服务rcp拦截器问题
程序员一鸣
|
5天前
|
开发框架 JavaScript 前端开发
鸿蒙开发：什么是ArkTs？
本小结主要简单介绍了ArkTs语言的相关知识，都是一些概念性质的内容，大家作为一个了解即可
程序员一鸣
101 61
程序员一鸣
|
2天前
|
开发者
鸿蒙开发：了解分割线
在实际的开发中，如果自带的分割线能够满足我们的需求，以自身的分割线属性为主，如果不满足，我们可以使用组件进行绘制。
程序员一鸣
49 16
鸿蒙开发：了解分割线
程序员一鸣
|
4天前
|
存储
鸿蒙开发：远场通信服务rcp会话问题
总体来说，问题倒不是很大，解决起来也不是很麻烦，所以啊，老铁们，在实际的开发中，对于一些官方文档，还是建议多看，这样可以提前避免后续的不必要麻烦。
程序员一鸣
44 7
鸿蒙开发：远场通信服务rcp会话问题
程序员一鸣
|
8天前
|
前端开发 JavaScript 程序员
鸿蒙开发：console日志输出
针对初学者而言，大家只需要掌握住日志打印即可，等到了鸿蒙应用开发的时候，还有一个鸿蒙原生的打印工具HiLog，到时，我们也会详细的去讲述，也会针对HiLog，封装一个通用的工具类。
程序员一鸣
52 11
鸿蒙开发：console日志输出

热门文章

最新文章

  • 1
    【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画（ohos.animator）书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
  • 2
    uniapp 极速上手鸿蒙开发
  • 3
    鸿蒙开发：什么是ArkTs？
  • 4
    鸿蒙特效教程01-哔哩哔哩点赞与一键三连效果实现教程
  • 5
    鸿蒙开发：wrapBuilder传递参数
  • 6
    鸿蒙web加载本地网页资源异常
  • 7
    一文彻底搞清楚HarmonyOS元服务
  • 8
    HarmonyOS NEXT 实战系列08-案例微博导航设置
  • 9
    Harmony os next～HarmonyOS Ability与页面跳转开发详解
  • 10
    【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
  • 1
    鸿蒙开发：了解分割线
    49
  • 2
    鸿蒙开发：填充剩余空间
    51
  • 3
    鸿蒙相机开发实战：从设备适配到性能调优 —— 我的 ArkTS 录像功能落地手记（API 15）
    21
  • 4
    鸿蒙开发，远场通信服务rcp拦截器问题
    51
  • 5
    HarmonyOS Next～HarmonyOS应用开发工具：DevEco Testing
    20
  • 6
    HarmonyOS Next～HarmonyOS应用开发工具之AppGallery Connect
    18
  • 7
    鸿蒙开发：远场通信服务rcp会话问题
    44
  • 8
    鸿蒙特效教程01-哔哩哔哩点赞与一键三连效果实现教程
    101
  • 9
    从 0 到 1 掌握鸿蒙 AudioRenderer 音频渲染：我的自学笔记与踩坑实录（API 14）
    38
  • 10
    鸿蒙开发：什么是ArkTs？
    101

    • 相关电子书

    更多
  • Android热修复技术原理详解与升级探索
  • 基于WebAssembly的H265播放器
  • 《深入探索Android热修复技术原理》
    • 下一篇
    阿里云oss简介和如何对接使用