到目前为止，我们已经完成了：
-
状态管理（V2）
-
网络与缓存
-
列表分页与性能
-
登录系统与全局状态
但还有一个问题没有系统解决：
当页面多了以后，应用怎么"跑"起来？
答案是三个关键词：
路由 · 生命周期 · 页面架构
一、为什么一定要理解路由和生命周期？
很多新手的项目，前期还能维护，一到中后期就开始出现：
-
页面跳转混乱
-
返回逻辑不一致
-
登录态失效后页面不刷新
-
页面销毁/重建时状态丢失
-
返回键行为不可控
这些问题的本质是：
你在写页面，但没有在"设计页面体系"。
二、先画一张应用的"页面地图"
我们以当前 App 为例，页面结构如下：
AppRoot
├─ LoginPage
└─ MainPage
├─ HomePage（任务列表）
├─ DetailPage（任务详情）
└─ ProfilePage（个人中心）📌 这是一个典型商业应用结构：
-
Root 决定走向
-
Main 负责多页面
-
子页面专注业务
三、HarmonyOS 的路由体系（核心 API）
HarmonyOS ArkUI 提供的路由模块：
import router from '@ohos.router'最常用的 4 个方法
| 方法 | 作用 |
|---|---|
| router.pushUrl | 跳转新页面 |
| router.replaceUrl | 替换当前页面 |
| router.back | 返回 |
| router.clear | 清空路由栈 |
四、页面跳转实战（从列表到详情）
1️⃣ 在列表页跳转详情页
Button("查看详情")
.onClick(() => {
router.pushUrl({
url: 'pages/Detail',
params: {
taskId: this.task.id
}
})
})📌 页面参数通过 params 传递
📌 不建议使用全局变量
2️⃣ 在详情页接收参数
@Entry
@ComponentV2
struct Detail {
@Local taskId: number = 0
onPageShow() {
const params = router.getParams()
this.taskId = params.taskId
}
build() {
Text(`任务 ID：${this.taskId}`)
}
}五、页面生命周期（非常重要）
每个页面都有一套完整生命周期。
常用生命周期方法
| 方法 | 何时调用 |
|---|---|
| onPageShow | 页面可见 |
| onPageHide | 页面不可见 |
| onBackPress | 返回键 |
| onPageDestroy | 页面销毁 |
示例：页面显示时刷新数据
onPageShow() {
this.store.refresh()
}📌 比 @Once 更适合"回到页面就刷新"
示例：拦截返回键
onBackPress() {
if (this.hasEdit) {
showDialog('确认退出？')
return true // 阻止默认返回
}
return false
}六、登录态失效时如何"强制回登录页"？
错误做法 ❌
-
在每个页面判断 isLogin
-
到处写 router.replace
正确做法 ✔
👉 统一在 AppRoot 中处理
if (!this.appStore.auth.isLogin) {
router.clear()
router.replaceUrl({ url: 'pages/Login' })
}📌 页面永远不关心登录态逻辑
📌 这是架构级决策
七、多页面架构设计（教学重点）
推荐三层页面结构
| 层级 | 职责 |
|---|---|
| Root | 登录判断、初始化 |
| Shell | Tab / Navigation |
| Page | 业务页面 |
示例：MainPage（壳页面）
@ComponentV2
struct MainPage {
@Local tabIndex = 0
build() {
Column() {
if (this.tabIndex === 0) {
HomePage()
} else {
ProfilePage()
}
BottomNavigation({
current: this.tabIndex,
onChange: i => this.tabIndex = i
})
}
}
}📌 Tab 页不是路由
📌 Tab 是状态切换
八、什么时候用"页面"，什么时候用"组件"？
这是一个分界点问题。
用页面（router）：
-
页面级业务
-
可返回
-
需要参数传递
-
生命周期敏感
用组件（Component）：
-
UI 复用
-
局部状态
-
无路由栈
📌 页面 ≠ 组件
九、常见路由 & 生命周期坑
❌ 在 build() 中跳转页面
可能无限重建
✔ 在事件 / 生命周期中跳转
❌ 页面销毁时忘记清理 Worker / Timer
内存泄漏
✔ 在 onPageDestroy 中清理
❌ 多页面共用一个 @Local 状态
状态错乱
✔ 用 Store / Provider
十、到这一篇，你的应用已经是什么水平？
你已经具备：
✔ 完整页面路由体系
✔ 生命周期理解
✔ 多页面架构设计能力
✔ 登录态统一管理
✔ 页面职责划分意识
这已经是：
能支撑中大型 HarmonyOS 应用的架构基础
结语
路由和生命周期不是 API，而是"应用运行的骨架"。
当你真正理解它们，
你写的不再是"页面"，而是一个完整的应用系统。