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

【HarmonyOS】HMRouter使用详解（二）

2024-12-24 76
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
64ml4hiqojt5k
|
1月前
|
容器
【HarmonyOS】HMRouter使用详解（一）环境配置
在项目中使用官方推荐的Navigation时，需要在所有的页面上都添加一层NavDestination，在代码阅读上会增加多个层级，而且还要在主页面设置对应名字的跳转等问题，配置起来比较繁琐。看到大佬开发的HMRouter使用起来方便简洁，因此，写下这篇文章记录HMRouter的使用。
64ml4hiqojt5k
75 8
【HarmonyOS】HMRouter使用详解（一）环境配置
64ml4hiqojt5k
|
1月前
|
监控
【HarmonyOS】HMRouter使用详解（三）生命周期
使用HMRouter的页面跳转时，想实现和Navigation一样的生命周期时，需要通过新建生命周期类来实现对页面对某一个生命周期的监控。
64ml4hiqojt5k
92 5
【HarmonyOS】HMRouter使用详解（三）生命周期
64ml4hiqojt5k
|
1月前
【HarmonyOS】HMRouter使用详解（四）路由拦截
可以对指定或全局路由跳转时添加拦截器，作用是可以实现在页面切换前做判断是否有进入当前页面的权限。这篇文章将实现登录的全局路由拦截样式。
64ml4hiqojt5k
81 2
code404
|
1月前
|
人工智能 Java 程序员
HarmonyOS实战开发之HMRouter实现跳转
本文介绍了HarmonyOS页面跳转的两种方式：组件导航（Navigation）和页面路由（@ohos.router），并推荐使用更灵活的组件导航。进一步详细讲解了HMRouter，一个解决HarmonyOS页面跳转问题的框架，其功能包括页面跳转、弹窗提示、转场动效等。通过下载依赖、配置插件、初始化和实现跳转四个步骤，可以轻松集成HMRouter，实现高效页面管理。文章还展示了具体代码示例和效果截图，帮助开发者快速上手。关注Feri，带你掌握鸿蒙开发技巧！
code404
126 0
code404
|
29天前
|
存储 人工智能 JavaScript
Harmony OS开发-ArkTS语言速成二
本文介绍了ArkTS基础语法，包括三种基本数据类型（string、number、boolean）和变量的使用。重点讲解了let、const和var的区别，涵盖作用域、变量提升、重新赋值及初始化等方面。期待与你共同进步！
code404
90 47
Harmony OS开发-ArkTS语言速成二
二流小码农
|
1月前
|
API 索引
鸿蒙开发：实现一个超简单的网格拖拽
实现拖拽，最重要的三个方法就是，打开编辑状态editMode，实现onItemDragStart和onItemDrop，设置拖拽移动动画和交换数据，如果想到开启补位动画，还需要实现supportAnimation方法。
二流小码农
79 13
鸿蒙开发：实现一个超简单的网格拖拽
二流小码农
|
30天前
|
索引 API
鸿蒙开发：自定义一个股票代码选择键盘
金融类的软件，特别是股票基金类的应用，在查找股票的时候，都会有一个区别于正常键盘的键盘，也就是股票代码键盘，和普通键盘的区别就是，除了常见的数字之外，也有一些常见的股票代码前缀按钮，方便在查找股票的时候，更加方便的进行检索。
二流小码农
93 7
鸿蒙开发：自定义一个股票代码选择键盘
二流小码农
|
30天前
|
API
鸿蒙开发：自定义一个英文键盘
实现方式呢，有很多种，目前采用了比较简单的一种，如果大家采用网格Grid组件实现方式，也是可以的，但是需要考虑每行的边距以及数据，还有最后两行的格子占位问题。
二流小码农
76 4
鸿蒙开发：自定义一个英文键盘
二流小码农
|
1月前
|
存储 JSON 数据库
鸿蒙元服务项目实战：备忘录内容编辑开发
富文本内容编辑我们直接使用RichEditor组件即可，最重要的就是参数，value: RichEditorOptions，通过它，我们可以用来设置样式，和获取最后的富文本内容，这一点是很重要的。
二流小码农
79 5
鸿蒙元服务项目实战：备忘录内容编辑开发
二流小码农
|
30天前
|
前端开发 API 数据库
鸿蒙开发：异步并发操作
在结合async/await进行使用的时候，有一点需要注意，await关键字必须结合async，这两个是搭配使用的，缺一不可，同步风格在使用的时候，如何获取到错误呢，毕竟没有catch方法，其实，我们可以自己创建try/catch来捕获异常。
二流小码农
100 3
鸿蒙开发：异步并发操作