企业官网建设流程全解析

前言

HarmonyOS 提供了两种页面路由方案：@ohos.router（轻量级路由 API）和Navigation 组件（声明式路由容器）。两者在路由栈管理、生命周期控制和参数传递方面存在显著差异。本文以小事记（xiaoshiji_ohos_app） 项目中的Index.ets和BottomTabBar.ets为分析对象，深入对比两种路由方案的核心差异，并分析 BottomTabBar 使用router.replaceUrl的潜在问题。

本文参考 HarmonyOS 官方文档：Navigation 组件 和 @ohos.router 参考。

一、两种路由方案概述

1.1 @ohos.router

@ohos.router是轻量级的路由 API，适合简单的页面跳转场景：

// @ohos.router 的基本用法 import router from '@ohos.router'; // 跳转到新页面 router.pushUrl({ url: 'pages/EventDetailPage', params: { eventId: '123' } }); // 替换当前页面 router.replaceUrl({ url: 'pages/HomePage' }); // 返回上一页 router.back(); // 获取页面参数 const params = router.getParams() as Record<string, Object>;

1.2 Navigation 组件

Navigation是声明式路由容器，提供更丰富的路由控制能力：

// Navigation 组件的基本用法 @Entry @Component struct AppNavigation { private stack: NavPathStack = new NavPathStack(); build() { Navigation(this.stack) { Column() { Button('跳转到详情') .onClick(() => { this.stack.pushPathByName('EventDetailPage', { eventId: '123' }); }) } } } }

二、路由栈管理的对比

2.1 路由栈 API 对比

2.2 路由栈的操作对比

@ohos.router 的路由栈操作：

// @ohos.router — 栈操作有限 router.pushUrl({ url: 'pages/PageA' }); // 压栈：[PageA] router.pushUrl({ url: 'pages/PageB' }); // 压栈：[PageA, PageB] router.back(); // 出栈：[PageA] router.replaceUrl({ url: 'pages/PageC' }); // 替换：[PageC] // 无法直接跳转到指定页面、无法清空栈

Navigation 组件的路由栈操作：

// Navigation — 丰富的栈操作 let stack: NavPathStack = new NavPathStack(); stack.pushPathByName('PageA', null); // 压栈：[PageA] stack.pushPathByName('PageB', null); // 压栈：[PageA, PageB] stack.pushPathByName('PageC', null); // 压栈：[PageA, PageB, PageC] stack.pop(); // 出栈：[PageA, PageB] stack.popToName('PageA'); // 出栈到 PageA：[PageA] stack.clear(); // 清空栈：[]

三、生命周期差异

3.1 页面生命周期

3.2 页面返回数据传递

@ohos.router不支持返回数据：

// @ohos.router — 无法返回数据 // 页面 A：跳转到页面 B router.pushUrl({ url: 'pages/PageB' }); // 页面 B：返回页面 A router.back(); // 页面 A 无法获取页面 B 返回的数据

Navigation 组件支持返回数据：

// Navigation — 支持返回数据 // 页面 A：跳转到页面 B stack.pushPathByName('PageB', { mode: 'select' }); // 页面 B：返回页面 A 并携带数据 stack.pop({ selectedId: '123' }); // 在页面 A 中监听返回数据 stack.onPop((popInfo) => { if (popInfo.result) { const selectedId = (popInfo.result as Record<string, Object>).selectedId; console.log(`返回的数据: ${selectedId}`); } });

四、BottomTabBar 的 router.replaceUrl 问题

4.1 当前实现分析

小事记的BottomTabBar.ets使用router.replaceUrl实现 Tab 切换：

// BottomTabBar.ets — 当前实现：使用 router.replaceUrl @Component export struct BottomTabBar { @Prop currentTab: string = 'HomePage'; build() { Row() { // 首页 Column({ space: 2 }) { Text('首页') .fontSize(10) .fontColor(this.currentTab === 'HomePage' ? '#7B68EE' : '#9CA3AF') } .layoutWeight(1) .onClick(() => { if (this.currentTab !== 'HomePage') { router.replaceUrl({ url: 'pages/HomePage' }); // 替换路由 } }) // 时间轴 Column({ space: 2 }) { Text('时间轴') .fontSize(10) .fontColor(this.currentTab === 'TimelineViewPage' ? '#7B68EE' : '#9CA3AF') } .layoutWeight(1) .onClick(() => { if (this.currentTab !== 'TimelineViewPage') { router.replaceUrl({ url: 'pages/TimelineViewPage' }); // 替换路由 } }) } } }

4.2 潜在问题

4.3 使用 Navigation 组件重构

// Navigation 组件的 Tab 实现 @Entry @Component struct AppMain { private stack: NavPathStack = new NavPathStack(); @State currentTab: string = 'HomePage'; build() { Column() { Navigation(this.stack) { // 页面内容 } .hideTitleBar(true) // 底部 Tab 栏 Row() { this.buildTabItem('首页', 'HomePage') this.buildTabItem('时间轴', 'TimelineViewPage') this.buildTabItem('设置', 'SettingsPage') } .width('100%') .height(60) .backgroundColor(Color.White) } .width('100%') .height('100%') } @Builder buildTabItem(label: string, pageName: string) { Column({ space: 2 }) { Text(label) .fontSize(10) .fontColor(this.currentTab === pageName ? '#7B68EE' : '#9CA3AF') } .layoutWeight(1) .onClick(() => { if (this.currentTab !== pageName) { this.currentTab = pageName; this.stack.clear(); // 清空当前栈 this.stack.pushPathByName(pageName, null); // 压入新页面 } }) } }

五、选择建议

5.1 选择标准

5.2 迁移路径

如果当前项目使用 @ohos.router，可以逐步迁移到 Navigation：

1. 在 App 入口添加 Navigation 容器 2. 将页面内容提取为独立组件 3. 使用 NavPathStack 替代 router.pushUrl 4. 使用 stack.pop() 替代 router.back() 5. 移除 router 的导入

八、拓展阅读

本节汇总了与本文主题相关的扩展阅读材料，帮助读者深入理解相关技术细节。

8.1 官方文档

• 开发者指南：HarmonyOS 应用开发概述
• API 参考：ArkTS API 参考

8.2 相关技术文章

• 性能优化最佳实践
• 常见问题排查指南

8.3 社区资源

• 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

十、最佳实践与优化建议

在实际开发中，合理运用上述技术可以显著提升应用的性能和用户体验。以下是几个关键的最佳实践建议：

10.1 性能优化要点

10.2 推荐实践步骤

按照以下步骤进行优化：

1. 使用 DevEco Studio 的 Profiler 工具分析当前性能瓶颈
2. 针对识别出的热点进行针对性优化
3. 通过单元测试和集成测试验证优化效果
4. 在真机环境下进行回归测试

10.3 代码示例

// 推荐的最佳实践示例 @Component export struct OptimizedComponent { // 使用 @State 管理最小粒度的状态 @State private isActive: boolean = false; build() { Column() { Text(this.isActive ? '激活' : '未激活') .fontSize(16) } .onClick(() => { // 使用 animateTo 实现平滑过渡 animateTo({ duration: 300 }, () => { this.isActive = !this.isActive; }); }); } }

最佳实践提示：在编写代码时，始终遵循 ArkUI 的性能优化原则，避免在 build() 方法中执行复杂计算或频繁的状态更新。

总结

本文深入对比了 @ohos.router 与 Navigation 组件的差异。核心要点如下：

1. @ohos.router轻量简单，但路由栈操作有限，不支持指定出栈和返回数据
2. Navigation 组件提供完整的路由栈管理，支持pushPathByName、popToName、clear等操作
3. BottomTabBar 的 replaceUrl 问题：替换路由导致回退栈丢失，推荐使用 Navigation 重构
4. 选择策略：简单场景用 router，复杂场景用 Navigation

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

九、完整示例代码

9.1 完整组件实现

以下是一个完整的组件实现示例，展示了本文介绍的各个技术点的综合运用：

import { Component, State, Prop } from '@kit.ArkUI'; @Component export struct DemoComponent { @Prop title: string = ''; @State count: number = 0; build() { Column({ space: 12 }) { // 标题区域 Text(this.title) .fontSize(18) .fontWeight(FontWeight.Bold) .fontColor('#1A1A2E') .width('100%') // 内容区域 Text(`当前计数: ${this.count}`) .fontSize(14) .fontColor('#6B7280') // 交互按钮 Button('点击增加') .width(120) .height(40) .backgroundColor('#7B68EE') .borderRadius(20) .fontColor(Color.White) .onClick(() => { this.count++; }) } .width('100%') .padding(16) .backgroundColor(Color.White) .borderRadius(12) .shadow({ radius: 4, color: '#00000008', offsetX: 0, offsetY: 2 }) } }

9.2 使用方式

在页面中引入并使用该组件：

@Entry @Component struct Index { build() { Column() { DemoComponent({ title: '示例组件' }) } .width('100%') .height('100%') .backgroundColor('#F8F9FA') } }

9.3 代码说明

• 组件封装：使用@Component装饰器定义可复用的组件
• 状态管理：使用@State管理组件内部状态
• 参数传递：使用@Prop接收外部传入的参数
• 事件处理：使用onClick处理用户交互
• 样式优化：使用borderRadius、shadow等属性美化 UI

相关资源：

• 官方文档 - 开发者指南：HarmonyOS 应用开发
• 官方文档 - ArkUI 组件参考：ArkUI 组件
• 官方文档 - API 参考：API 参考
• 官方文档 - 状态管理：状态管理概述
• 官方文档 - 动画：动画概述
• 官方文档 - 网络管理：网络管理
• 官方文档 - 数据管理：数据管理
• 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net