HarmonyOS7 Navigation 组件：取代 router 的新路由

文章目录前言Navigation 的基本结构代码实现注册子页面NavDestination核心代码带参数跳转为什么选 Navigation 而不是 router常见误区小白必踩完整可运行示例Navigation 路由完整示例写在最后前言早期 HarmonyOS 用router.pushUrl()做页面跳转能用但有个大问题它管不了页面栈的整体结构做不了侧边栏、分栏、转场动画统一管理。新项目我强烈推荐Navigation组件。它是一套导航容器页面栈、转场、路由都在它手里还能一套代码适配手机和平板手机单栏、平板分栏。这篇文章讲清它怎么用。Navigation 的基本结构Navigation通常作为根布局里面放NavPathStack管理的页面。代码实现EntryComponentV2struct MainPage{Provider(nav)nav:NavPathStacknewNavPathStack()build(){Navigation(this.nav){Column(){Text(首页).fontSize(24)Button(去详情).onClick((){this.nav.pushPath({name:Detail})// 跳转})}.width(100%).height(100%)}.title(我的应用)}}讲解Navigation(this.nav)把导航栈NavPathStack交给容器管理。this.nav.pushPath({ name: Detail })按名字压入一个名为Detail的页面。比router直观。.title(‘我的应用’)导航栏标题。注册子页面NavDestination被跳转的页面用NavDestination包裹并通过navDestination回调按名字返回对应页面核心代码EntryComponentV2struct MainPage{Provider(nav)nav:NavPathStacknewNavPathStack()BuilderpageMap(name:string){if(nameDetail){DetailPage()}}build(){Navigation(this.nav){// 首页内容...}.navDestination(this.pageMap)// 注册页面映射.title(我的应用)}}ComponentV2struct DetailPage{Consumer(nav)nav:NavPathStacknewNavPathStack()build(){NavDestination(){Column(){Text(详情页)Button(返回).onClick(()this.nav.pop())// 出栈返回}}.title(详情)}}要点pageMap是个Builder根据name返回对应页面组件相当于路由表。子页面用NavDestination包裹而不是Entry。this.nav.pop()出栈返回上一页比router.back()语义清晰。带参数跳转this.nav.pushPath({name:Detail,param:{id:123,title:商品名}// 携带参数})// 在 DetailPage 里取aboutToAppear(){constparamthis.nav.getParamByName(Detail)[0]as{id:number,title:string}}param可以带任意对象目标页用getParamByName取。比 router 的字符串拼接优雅太多。为什么选 Navigation 而不是 router维度routerNavigation页面栈管理弱强NavPathStack转场动画需手写内置统一转场分栏适配不支持原生支持手机/平板参数传递字符串任意对象结论新项目直接用 Navigation。router 只在维护老代码时才会碰到。常见误区小白必踩误区说明子页面用Entry而非NavDestinationNavigation 体系下子页要用NavDestination包裹否则路由管理失效。参数用字符串拼接老 router 的params拼字符串易错Navigation 用param传任意对象更稳。忘了navDestination(pageMap)不注册页面映射跳转时找不到目标页。下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲改一改文末「动手改一改」里的参数亲眼看看效果。完整可运行示例Navigation 路由HarmonyOS7 推荐用Navigation取代老的router.pushUrl。完整示例// Navigation NavPathStack 管理页面栈EntryComponentstruct Home{Providenav:NavPathStacknewNavPathStack()build(){Navigation(this.nav){Column({space:12}){Button(去详情页).onClick((){this.nav.pushPath({name:Detail})// 入栈})}.padding(20)}.title(首页)}}Componentstruct Detail{Consumenav:NavPathStackbuild(){NavDestination(){Column(){Text(详情页).fontSize(22)Button(返回).onClick((){this.nav.pop()})// 出栈}.padding(20)}.title(详情)}}你会看到什么首页点「去详情页」平滑切到详情页点「返回」回到首页。页面栈由NavPathStack统一管理比全局router更可控。动手改一改把pushPath改成replacePath体验「替换而非压栈」。用nav.clear()一次性清空栈回到根。给pushPath的第二个参数带param在详情页用this.nav.getParamByName()取参。写在最后Navigation 的套路根页用NavigationNavPathStack子页用NavDestination跳转靠pushPath返回靠pop。它把页面栈、转场、适配都收编了是目前官方主推的路由方案。把你新页面的跳转都从router迁到Navigation尤其是要做平板适配的项目——这套方案能省你大量适配代码。