当前位置：首页 > news >正文

鸿蒙分享(二)：引入zrouter路由跳转+封装

news 2025/8/5 3:30:31

码仓库：https://gitee.com/linguanzhong/share_harmonyos 鸿蒙api:12

鸿蒙第三方库地址：OpenHarmony三方库中心仓

zrouter地址：OpenHarmony三方库中心仓

1.引入zrouter

1.打开终端界面：输入 ohpm install @hzw/zrouter

2.在项目根目录的hvigor目录的hvigor-config.json5文件中配置安装 Sync Now或重新build让插件安装生效

"router-register-plugin":"1.1.1"

3.导入router-register-plugin插件模块

3.1在common模块的hvigorfile.ts文件导入router-register-plugin插件模块，如下

import { harTasks } from '@ohos/hvigor-ohos-plugin';
import { routerRegisterPlugin, PluginConfig } from 'router-register-plugin'const config: PluginConfig = {scanDirs: ["src/main/ets/components"],logEnabled: true, // 查看日志viewNodeInfo: false, // 查看节点信息isAutoDeleteHistoryFiles: true // 删除无用编译产物
}export default {system: harTasks,plugins: [routerRegisterPlugin(config)]
}

3.2 在entry模块的hvigorfile.ts文件导入router-register-plugin插件模块，如下

import { hapTasks } from '@ohos/hvigor-ohos-plugin';
import { routerRegisterPlugin, PluginConfig } from 'router-register-plugin'const config: PluginConfig = {scanDirs: ['src/main/ets/pages'],logEnabled: true, // 查看日志viewNodeInfo: false, // 查看节点信息isAutoDeleteHistoryFiles: false // 删除无用的编译产物}export default {system: hapTasks,plugins: [routerRegisterPlugin(config)]
}

4.初始化ZRouter

找到EntryAbility，onCreate方法添加如下代码

    // 如果项目中存在hsp模块则传入trueZRouter.initialize((config) => {config.isLoggingEnabled = BuildProfile.DEBUGconfig.isHSPModuleDependent = trueconfig.loadDynamicModule = ['@hzw/hara', 'harb', 'hspc']config.onDynamicLoadComplete = () => {console.log("已完成所有模块的加载")}})

5.使用

编辑器新建页面：NewPages.ets

手动添加页面则在entry--src--main--resoures--base--profile--main_pages.json 添加路径

代码如下：

import { Route } from '@hzw/zrouter';@Route({ name: "NewPages" })
@Entry
@Component
export struct NewPages {build() {NavDestination() {Text("NewPagesHelloWorld").fontSize(50)}.height('100%').width('100%')}
}

跳转：

2.封装

新建BaseRouter.ets 代码如下

import { ZRouter } from '@hzw/zrouter';
import { OnPopCallback } from '@hzw/zrouter/src/main/ets/model/Model';/*** 路由跳转*/
export class BaseRouter {static readonly NewPages = "NewPages"/*** 页面跳转* BaseRouter.push(BaseRouter.WebViewPage, Object({title: "用户协议"}))*/static push(name: string, params?: object, animated?: boolean, mode: LaunchMode = LaunchMode.STANDARD) {ZRouter.getInstance().setLunchMode(mode).setParam(params).setAnimate(animated).push(name)}//替换页面static replacePathByName(name: string, params?: object, animated?: boolean, mode: LaunchMode = LaunchMode.STANDARD) {ZRouter.replacePathByName(name, params, animated)ZRouter.getInstance().setLunchMode(mode).setParam(params).replace(name)}// 页面跳转带返回值public static pushForResult(name: string, param?: object, callback?: OnPopCallback) {ZRouter.pushForResult(name, param, callback)}//后退static back() {ZRouter.pop()}static clear() {ZRouter.clear()}//后退带返回值static backWithResult(params?: object) {ZRouter.popWithResult(params)}/*** 获取参数* @param key* @returns* 使用：BaseRouter.getParamName<string>("title") ?? ""*/static getParamName<T>(key: string): T | undefined {let aa = ZRouter.getParam() as objectif (aa) {return aa[key]}return undefined}
}

导出BaseRouter.ets

index.ets export { BaseRouter } from './src/main/ets/utils/BaseRouter'

1.修改index.ets

import { ZRouter } from '@hzw/zrouter';
import { BaseRouter } from 'common';@Entry
@Component
struct Index {build() {Navigation(ZRouter.getNavStack()) {Column() {Text("To NewPages").fontSize(50).onClick(() => {BaseRouter.push(BaseRouter.NewPages, Object({title: "哈哈哈",}))})}}.height('100%').width('100%')}
}

2.修改NewPages.ets

import { Route } from '@hzw/zrouter';
import { BaseRouter } from 'common';@Route({ name: BaseRouter.NewPages })
@Entry
@Component
export struct NewPages {@State title: string = '';aboutToAppear(): void {//获取传参this.title = BaseRouter.getParamName<string>("title") ?? ""console.log("title:"+this.title)}build() {NavDestination() {Text("NewPagesHelloWorld").fontSize(50)}.title(this.title).height('100%').width('100%')}
}

3：点击text跳转