路由跳转
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 | 自定义动画，使用传入的动画进行转场，传入false时将禁用动画 |
| 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的回调函数。
