鸿蒙页面导航与路由:页面之间的跳转

多页面App的核心是导航:页面A跳到页面B、传参数、返回。鸿蒙提供两种导航方案:router(经典)和Navigation(新式)。选择与使用,这篇讲清楚。

router导航

  • router.pushUrl:跳转到新页面(压入页面栈);
  • router.replaceUrl:替换当前页面;
  • router.back:返回上一页;
  • 传参:params(router.pushUrl({url, params}));
  • 接收:router.getParams()。

Navigation导航

Navigation:组件式导航(声明式);NavPathStack管理路由栈;支持:页面转场动画、动态路由、返回拦截;推荐:新项目用Navigation(更现代、灵活)。

参数传递

简单参数:router/Navigation的params;复杂对象:序列化传递(JSON);跨页面状态:全局状态(AppStorage)或数据层;回传结果:返回时带数据(Navigation支持)。

导航的体验

转场动画:页面切换动画(默认/自定义);返回逻辑:物理返回键(backHandler);深链接:从外部拉起指定页面(Deep Link);导航状态:页面栈管理(防重复跳转)。

常见问题

页面重复:连续点击跳转两次(加防抖);参数丢失:页面重建时重新获取;返回错误:页面栈管理不当(检查push/back配对);动画卡顿:复杂页面减少动画。

页面导航是App的“骨架”:router简单直接、Navigation现代灵活。传参要规范、返回要可控、体验要流畅——导航做好了,App的结构就稳了。

发表评论