harmonyos页面跳转需满足三条件:页面已注册、正确导入router模块、在abouttoappear中读取参数;否则跳转空白或参数为空。

在HarmonyOS应用中实现页面跳转并把商品ID、名称、价格准确带到详情页,必须同时满足三个条件:页面已注册、router模块正确导入、参数在生命周期钩子中读取。缺一不可,否则跳转空白或参数为空。
第一步:注册页面路径
打开 entry/src/main/resources/base/profile/main_pages.json 文件,确认目标页面路径已写入 src 数组中。例如要跳转到商品详情页,必须包含 ["pages/DetailPage"];若使用子目录(如 pages/detail/DetailPage),路径必须完全一致,大小写敏感。
未注册的页面 router 无法定位,调用 pushUrl 后界面无反应,控制台也不报错,这是 90% 初学者跳转失败的根源。
第二步:导入并调用 router.pushUrl
在源页面(如 HomePage.ets)顶部第一行添加导入语句:import { router } from '@kit.ArkUI';
在按钮点击事件中调用跳转:
router.pushUrl({ url: 'pages/DetailPage', params: { id: 1001, name: '商品A', price: 99.9 } }).catch(err => console.error(err.message));
注意:url 必须是相对路径,且与 main_pages.json 中声明的路径完全匹配;params 可传任意 JSON 可序列化类型(对象、数组、基础类型),但不能传函数或 undefined。
第三步:在目标页接收参数
参数不能在 build() 中直接获取——此时页面尚未完成初始化,router.getParams() 返回空对象。
必须在 aboutToAppear() 生命周期钩子中读取:
@Entry@Componentstruct DetailPage {@State detail: Record
这一步漏掉,你会看到页面渲染了但数据全是默认值,调试时 console.log(router.getParams()) 也为空。
第四步:返回并回传数据(可选)
若需从详情页返回时向首页传递更新状态(如“已收藏”),用 router.back() 携带参数:
router.back({ url: 'pages/HomePage', params: { updated: true, id: this.detail.id } });
首页在自己的 aboutToAppear() 中再次调用 router.getParams() 即可捕获该返回值。
注意:router.back() 不指定 url 时默认返回上一页;指定 url 可强制跳转到特定页面,但该页面必须已在 main_pages.json 中注册。











