一文秒懂鸿蒙Harmony-Next 路由的使用

​ 在实际开发中，页面的跳转通常是通过路由来跳转的。而 鸿蒙提供了两种常用的路由模块：@kit.ArkUI 和 @ohos.router。本文将通过简单的例子说明这两种路由模块的区别，帮助你快速掌握鸿蒙路由的使用。

1. import { router } from '@kit.ArkUI'

@kit.ArkUI 是 ArkUI 提供的用户界面开发工具包，主要用于开发鸿蒙的轻量级应用和前端交互。其路由功能与传统的前端框架（如 Vue 或 React）比较类似，适合使用 ArkUI 开发的鸿蒙应用。

1.1 基本用法

以下是使用 @kit.ArkUI 进行页面跳转的基本示例：

import { router } from '@kit.ArkUI'; export default {  methods: {    navigateToNextPage() {      router.push({        uri: 'pages/nextPage' // 跳转到指定页面      });    }  } }; 

1.2 返回上一页

@kit.ArkUI 提供了简单的 API 用于返回上一页面，例如：

router.back(); // 返回到上一个页面 

1.3 kit router 特点

• 封装性强：@kit.ArkUI 的路由 API 和 Web 前端的开发风格类似，提供了更高层的抽象，方便开发者通过简单的 API 调用实现复杂的页面跳转和路由管理。
• 适合前端开发者：对于熟悉前端开发框架的开发者，@kit.ArkUI 的使用体验更加友好，API 设计上类似于 Vue Router 或 React Router。

2. import router from '@ohos.router'

@ohos.router 是鸿蒙系统原生的路由模块，面向的是整个系统级别的路由管理。相比于 @kit.ArkUI，@ohos.router 适用于鸿蒙应用的更底层开发，特别是在需要跨设备或跨应用的场景中具有优势。

2.1 基本用法

下面是使用 @ohos.router 实现页面跳转的示例：

import router from '@ohos.router'; export default {  methods: {    navigateToNextPage() {      router.replace({        uri: 'pages/nextPage' // 跳转到指定页面      });    }  } }; 

不同于 @kit.ArkUI 的 push，这里我们使用 replace 来进行页面跳转，这种方式会替换当前页面，而不是压入历史堆栈。

2.2 返回上一页

同样，@ohos.router 也提供了返回上一页的功能：

router.back(); 

2.3 API 特点

• 系统级路由：@ohos.router 更适合系统级的路由需求，支持跨应用和跨设备的路由管理。这使得它在分布式多设备环境中表现尤为突出。
• 更底层的控制：相比于 @kit.ArkUI，@ohos.router 提供了更底层的控制，允许开发者实现更复杂的路由逻辑。

3. 主要差异对比

通过以上例子，我们可以总结出 @kit.ArkUI 和 @ohos.router 的主要差异：

特性	@kit.ArkUI	@ohos.router
使用场景	轻量级前端应用开发，单一设备	系统级应用开发，跨设备场景
API 风格	类似 Web 前端框架，封装性强	更底层，适合系统级路由控制
路由方式	push 方式压入历史堆栈	replace 替换当前页面，提供更多控制
返回功能	router.back()，封装简单	router.back()，同样提供返回功能
跨应用/跨设备支持	不支持	支持跨应用和跨设备的分布式场景
适合开发者类型	熟悉前端框架的开发者	系统级应用开发者，需要更复杂的路由控制需求

4. 使用建议

• 如果你的应用是以 前端交互为主，并且只在单一设备上运行，推荐使用 @kit.ArkUI 提供的路由模块，它简洁且易于使用。
• 如果你正在开发一个 跨设备应用 或需要系统级的路由管理，那么 @ohos.router 将是更好的选择，它提供了更底层的控制和系统级的功能。

总结

@kit.ArkUI 和 @ohos.router 各有优势，前者适合轻量级的前端开发，后者则专注于系统级和分布式场景下的应用开发。在鸿蒙系统开发中，理解并合理使用这些路由模块，将有助于你构建更高效和灵活的应用程序。希望通过本文的介绍，你能更清晰地理解这两种路由的使用场景和差异。