鸿蒙路由 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"]
})