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

鸿蒙系统开发中路由使用详解

web 2025/7/20 8:17:42

鸿蒙系统提供了两种主要的路由机制：传统的Router模块和组件化的Navigation容器。下面我将详细介绍这两种路由方式的使用方法、区别以及实际应用示例。

一、Router模块基础使用

Router是鸿蒙早期提供的页面路由模块，通过URL实现页面跳转和数据传递。

1. 基本跳转方法

Router提供了两种跳转模式：

import router from '@ohos.router';// 1. pushUrl - 保留当前页，新页面压入栈
router.pushUrl({url: 'pages/DetailPage'
});// 2. replaceUrl - 替换当前页，销毁当前页
router.replaceUrl({url: 'pages/LoginPage'
});

2. 实例模式

Router支持两种页面实例模式：

// Standard模式(默认) - 每次跳转都新建实例
router.pushUrl({url: 'pages/DetailPage'
}, router.RouterMode.Standard);// Single模式 - 单实例，已存在则复用
router.pushUrl({url: 'pages/SettingPage'
}, router.RouterMode.Single);

3. 参数传递与接收

传递参数：

// 简单参数
router.pushUrl({url: 'pages/DetailPage',params: { id: 123, name: '商品1' }
});// 复杂对象
interface Product {id: number;name: string;
}
const product: Product = { id: 1, name: '手机' };
router.pushUrl({url: 'pages/DetailPage',params: { product: JSON.stringify(product) }
});

接收参数：

// 在目标页面
onPageShow() {const params = router.getParams();const id = params['id'];const product: Product = JSON.parse(params['product']);
}

二、Navigation组件详解

Navigation是鸿蒙官方推荐的路由容器组件，相比Router功能更强大。

1. 基本结构

@Entry
@Component
struct Index {pageStack: NavPathStack = new NavPathStack()build() {Navigation(this.pageStack) {// 首页内容Button("点击跳转").onClick(() => {this.pageStack.pushPath({ name: "DetailPage" })})}.title("首页") // 设置标题}
}

2. 目标页面配置

目标页面需要使用NavDestination作为根布局：

@Component
struct DetailPage {build() {NavDestination() {// 页面内容Text("详情页")}}
}// 必须导出Builder函数
@Builder
export function DetailPageBuilder() {DetailPage()
}

3. 路由表配置

在module.json5中添加配置：

{"module": {"routerMap": "$profile:route_map"}
}

route_map.json内容：

{"routerMap": [{"name": "DetailPage","pageSourceFile": "src/main/ets/pages/DetailPage.ets","buildFunction": "DetailPageBuilder"}]
}

三、高级路由功能

1. 路由守卫

可以实现全局拦截进行权限控制：

// 全局前置守卫
router.addBeforeHook((to, from, next) => {if (to.url === 'pages/ProfilePage' && !isLogin) {next({ url: 'pages/LoginPage' }) // 重定向} else {next() // 放行}
});

2. 动态路由

实现按需加载模块：

// 动态导入模块并跳转
await import(moduleName).then((result: ESObject) => {result.harInit(pageName);DynamicsRouter.getNavPathStack().pushPath({ name: builderName });
});

3. 自定义转场动画

Router的动画功能较基础，若需高级效果（如共享元素转场），建议使用Navigation组件：

import router from '@ohos.router';// 跳转时设置动画
router.pushUrl({url: 'pages/DetailPage',//入场动画效果enterAnimation: {duration: 500,curve: Curve.EaseOut,type: RouteAnimation.SlideRight // 目标页从右侧滑入},//退场动画exitAnimation: {duration: 300,curve: Curve.Linear,type: RouteAnimation.SlideLeft // 当前页向左滑出}
});//支持的动画类型:
//RouteAnimation.Slide：滑动效果（默认）。
//RouteAnimation.Translate：平移效果。
//RouteAnimation.Fade：淡入淡出效果。
//RouteAnimation.None：无动画。

四、Router与Navigation对比

特性	Router	Navigation
类型	API调用	组件容器
官方推荐	不再推荐	推荐使用
生命周期	标准页面生命周期	NavDestination特有生命周期
复杂UI支持	有限	支持标题栏、工具栏等
跨模块跳转	支持	更优支持
学习曲线	简单	较复杂
适用场景	简单跳转	复杂应用路由