前一篇讲了 List 列表，但存在两个问题：一是点文章没有展示详情页，二是收藏按钮点了没记住——退出去再进来，收藏状态丢失。
今天解决这两个问题。页面跳转用 Router 路由，数据存到本地用 Preferences 首选项。列表点进去看详情，收藏之后退出应用再打开还在，一个基础 App 的架子就有了。
学到这一步，能做出 App 最常用的列表-详情模式了。页面之间怎么跳转、数据怎么持久化，这两个东西是后面做网络请求、用户系统、复杂页面架构的基础。自己跟着教程学会碰到一个问题：每个知识点单独看都懂，连起来做一个完整项目不知道怎么下手。重庆华鸿科技的鸿蒙技术培训在讲完基础组件和路由存储之后，会用真实项目把这几块串起来，模块之间的衔接、数据的流转、问题的debug——对真实开发过程有切身体会，比看教程印象深得多。
14.1 页面和组件到底有什么区别？什么情况下用 @Entry？
刚开始学鸿蒙的人会问：页面和组件到底有什么区别？为什么有的能跳转，有的只能嵌在别的页面里？
鸿蒙里用来搭界面的东西分两种。一种叫页面，加 @Entry，能跳转。一种叫组件，只加 @Component，不能跳转，只能嵌在页面里用。
为什么要分两种？组件是为了复用。文章卡片、关注按钮、头像——这些 UI 片段在多个页面反复出现，写成组件，改一次到处生效。页面不能复用，每个页面独立注册路由路径，负责一整屏的内容。
能跳转的页面：加了 @Entry
@Entry@Componentstruct DetailPage { build() { /* ... */ }}
从列表跳过去：router.pushUrl({ url: 'pages/DetailPage' })
用来复用的组件：只加 @Component
@Componentstruct ArticleCard { @Prop title: string; build() { /* ... */ }}
在页面里使用：ArticleCard({ title: '文章标题' })
一张表看懂页面和组件的区别：
实际做 App 的时候两者混用——页面里嵌组件，点组件再跳页面。
14.2 页面之间怎么跳转？跳转时怎么传参数？
鸿蒙页面跳转用 Router，在 @ohos.router 模块里。
从列表跳到详情页，带上文章ID和标题：
import router from '@ohos.router';router.pushUrl({ url: 'pages/DetailPage', params: { articleId: '12345', title: '鸿蒙开发入门' }});
pushUrl 打开新页面，旧页面还在栈里。params 可以带字符串、数字、对象。
点返回按钮回到上一页：
详情页怎么拿到传过来的数据？在 aboutToAppear 里用 getParams 接收：
aboutToAppear(): void { const params = router.getParams() as Record<string, string>; if (params) { this.articleId = params['articleId']; this.title = params['title']; }}
返回上一页时，怎么把数据带回去？比如在详情页收藏了文章，要通知列表页更新收藏状态：
router.back({ url: 'pages/ListPage', params: { isCollected: true } });
列表页接收返回的数据，注意放在 onPageShow 里。aboutToAppear 只在页面创建时执行一次，从详情页返回来时列表页还在，不会重新创建，所以用 onPageShow。
onPageShow(): void { const params = router.getParams() as Record<string, boolean>; if (params && params['isCollected']) { // 更新收藏状态 }}
新建页面后去 main_pages.json 注册路径，不然跳转报错找不到页面。
14.3 鸿蒙数据怎么存到本地？Preferences 怎么用？
数据怎么存到本地？收藏状态只在内存里，App 退出或被杀掉就没了。Preferences 是鸿蒙的轻量级键值对存储，可以把数据持久化到本地。
初始化 Preferences：
import preferences from '@ohos.data.preferences';const PREFERENCES_NAME = 'my_app_data';let prefs: preferences.Preferences | null = null;prefs = preferences.getPreferencesSync(getContext(), PREFERENCES_NAME);
存数据到本地：
await prefs.put('isLoggedIn', true);await prefs.put('username', '华鸿');await prefs.flush(); // 必须 flush，不然数据不会写入磁盘
从本地读取数据：
const isLoggedIn = await prefs.get('isLoggedIn', false) as boolean;const username = await prefs.get('username', '') as string;
删除数据：
await prefs.delete('username');await prefs.flush();
支持 string、number、boolean、string[]。复杂对象先转成 JSON 字符串再存。
flush 这一步经常被漏掉。put 只是写到内存缓存，不调 flush 数据没落盘，App 被退出后数据丢失。
14.4 鸿蒙收藏功能怎么做？收藏状态怎么持久化？
鸿蒙收藏功能怎么做？每个页面散着写 Preferences 不好维护，抽一个工具类出来。收藏功能的实现思路：存一个收藏 ID 列表到 Preferences 里，点收藏加进去，点取消删掉，每次操作完 flush。
import preferences from '@ohos.data.preferences';const PREFERENCES_NAME = 'app_favorites';const FAVORITE_IDS_KEY = 'favorite_ids';class FavoriteManager { private prefs: preferences.Preferences | null = null; private favoriteIds: Set<string> = new Set(); async init(context: Context): Promise<void> { this.prefs = preferences.getPreferencesSync(context, PREFERENCES_NAME); const ids = await this.prefs.get(FAVORITE_IDS_KEY, []) as string[]; this.favoriteIds = new Set(ids); } isFavorite(id: string): boolean { return this.favoriteIds.has(id); } async toggle(id: string): Promise<boolean> { if (this.favoriteIds.has(id)) { this.favoriteIds.delete(id); } else { this.favoriteIds.add(id); } await this.prefs!.put(FAVORITE_IDS_KEY, Array.from(this.favoriteIds)); await this.prefs!.flush(); return this.isFavorite(id); }}export const favoriteManager = new FavoriteManager();
入口初始化一次，其他页面直接引用：
import { favoriteManager } from './FavoriteManager';await favoriteManager.init(getContext());const result = await favoriteManager.toggle('article_001');
14.5 完整示例：列表跳详情，收藏存本地
列表页：
import router from '@ohos.router';import { favoriteManager } from './FavoriteManager';@Entry@Componentstruct ArticleListPage { @State dataSource: ArticleDataSource = new ArticleDataSource([ /* 数据同上 */ ]); aboutToAppear(): void { favoriteManager.init(getContext()); } build() { List() { LazyForEach(this.dataSource, (item: Article) => { ListItem() { Row() { Button(favoriteManager.isFavorite(item.id) ? '★' : '☆') .width(40).height(40).fontSize(20) .fontColor(favoriteManager.isFavorite(item.id) ? '#FF6B6B' : '#CCCCCC') .backgroundColor(Color.Transparent) .onClick(() => { favoriteManager.toggle(item.id); }) } .onClick(() => { router.pushUrl({ url: 'pages/DetailPage', params: { articleId: item.id, title: item.title, summary: item.summary } }); }) } }) } }}
详情页：
import router from '@ohos.router';import { favoriteManager } from './FavoriteManager';@Entry@Componentstruct DetailPage { @State articleId: string = ''; @State title: string = ''; @State summary: string = ''; @State isCollected: boolean = false; aboutToAppear(): void { const params = router.getParams() as Record<string, string>; if (params) { this.articleId = params['articleId']; this.title = params['title']; this.summary = params['summary']; this.isCollected = favoriteManager.isFavorite(this.articleId); } } build() { Column({ space: 16 }) { Text(this.title).fontSize(22).fontWeight(FontWeight.Bold) Text(this.summary).fontSize(16).fontColor('#666666') Button(this.isCollected ? '取消收藏' : '收藏') .onClick(() => { favoriteManager.toggle(this.articleId); this.isCollected = !this.isCollected; }) Button('返回').onClick(() => router.back()) } .width('100%').padding(20) }}
列表点进去看详情，收藏按钮点一下存到本地，退出应用再打开还在。
14.6 本篇总结
页面和组件的区别：页面加 @Entry，负责一整屏，能跳转。组件只加 @Component，用来复用 UI 片段，嵌在页面里用。
页面之间怎么跳转：pushUrl 打开新页面，params 带数据，back 返回。返回参数在 onPageShow 里接收。
数据怎么存到本地：Preferences 键值对存储，put 存、get 取、flush 写盘、delete 删。
收藏功能怎么做：封装 FavoriteManager，存收藏 ID 列表，每次操作完 flush。
常见问题
Q: 页面和组件有什么区别？怎么判断用 @Entry 还是 @Component？A: 需要独立打开、能跳转的用 @Entry 页面。在多个页面重复使用的 UI 片段用 @Component 组件，比如文章卡片、关注按钮、头像。
Q: 鸿蒙页面跳转怎么传数据？A: pushUrl 时带 params，目标页在 aboutToAppear 里用 getParams 接收。
Q: 鸿蒙数据怎么存到本地？A: 用 Preferences。put 存，get 取。每次 put 完要 flush，不然数据没写盘，App 被杀掉就丢了。
Q: 收藏功能怎么做？收藏状态怎么持久化？A: 维护一个收藏 ID 的 Set，存到 Preferences 里。点收藏加入，点取消删除，操作完 flush。
Q: Router 和 Navigation 用哪个？A: 小项目 Router 够用。Navigation 是新推的导航方案，复杂应用用它。下一篇讲 Navigation。
下一篇：Navigation 组件——路径栈管理、Tab 页内嵌套子导航、跟 Router 的差别。
本文由「华鸿技术栈」原创发布，专注鸿蒙（HarmonyOS）原生应用与元服务开发。从零到一分享实战代码与项目案例，对接鸿蒙技术培训资源与上市公司研发岗位，为开发者铺平入行之路。不讲虚的，只上干货。转载请联系授权。
10个月宝宝每天需要喝多少奶粉？