鸿蒙路由 HMRouter 配置及使用 二
1、路由跳转
创建测试页面OnePage
import { HMRouter } from "@hadss/hmrouter";
@HMRouter({
pageUrl: "OnePage",
})
@Component
export struct OnePage {
build() {
Column() {
Text("测试页面 - OnePage").fontSize(30).fontWeight(FontWeight.Bold)
}
}
}
首页添加页面跳转按钮
// 跳转按钮 - OnePage
Button("跳转到 - OnePage").onClick((event: ClickEvent) => {
HMRouterMgr.push({
pageUrl: "OnePage",
param: {
name: "张三",
age: 18
}
})
})
跳转方法参数说明
HMRouterMgr.push({
navigationId?: string; // 指定导航HMNavigation的navigationId
pageUrl?: string; // push到哪个页面
param?: ESObject; // 传参对象
interceptors?: IHMInterceptor[]; // 指定路由拦截器
animator?: IHMAnimator | boolean; // 指定跳转动画
skipAllInterceptor?: boolean; // 是否跳过路由拦截
})
2、参数接收
在OnePage页面 通过getCurrentParam获取当前路由
@State param: HMPageParam = HMRouterMgr.getCurrentParam(HMParamType.all) as HMPageParam
aboutToAppear(): void {
console.log("OnePage aboutToAppear" + JSON.stringify(this.param))
}
3、路由拦截器
创建拦截器目录及OnePage拦截器 ,拦截器需要实现IHMInterceptor接口并通过@HMInterceptor注解添加拦截器信息。
@HMInterceptor注解参数说明
IHMInterceptor接口需要实现handle方法。handle方法参数可以获取路由信息,方法返回值必须是一个HMInterceptorAction枚举。
import { HMInterceptor, HMInterceptorAction, HMInterceptorInfo,
HMRouterPathInfo,
IHMInterceptor } from '@hadss/hmrouter';
@HMInterceptor({ interceptorName: "OnePageInterceptor" })
export class OnePageInterceptor implements IHMInterceptor {
handle(info: HMInterceptorInfo): HMInterceptorAction {
const routerPathInfo: HMRouterPathInfo = info.routerPathInfo;
// 如果是张三 停止跳转
if(routerPathInfo.param?.name === "张三") {
console.log("OnePageInterceptor - 张三 停止跳转")
return HMInterceptorAction.DO_REJECT;
}else {
// 继续向下执行
console.log("OnePageInterceptor - 继续向下执行")
return HMInterceptorAction.DO_NEXT
}
}
}
在OnePage页面使用拦截器
@HMRouter({
pageUrl: "OnePage",
interceptors: ["OnePageInterceptor"]
})