鸿蒙开辟（API12）通过组件导航Navigation配合NavPathStack实现页面路由 ...

Navigation是路由容器组件，一样平常作为首页的根容器，包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。Navigation组件实用于模块内和跨模块的路由切换，一次开辟，多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。在差异尺寸的装备上，Navigation组件可以或许自适应显示大小，自动切换分栏展示效果。
Navigation组件重要包罗​导航页(NavBar)和子页(NavDestination)。导航页由标题栏(Titlebar，包罗菜单栏menu)、内容区(Navigation子组件)和工具栏(Toolbar)组成，此中导航页可以通过hideNavBar属性进行隐蔽，导航页不存在页面栈中，导航页和子页，以及子页之间可以通过路由使用进行切换。
在API Version 9上，必要配合NavRouter组件实现页面路由，从API Version 10开始，推荐使用NavPathStack实现页面路由。
本篇文章只讲解Navigation通过NavPathStack进行跳转

导航页（也就是首页）用Navigation作为根布局，子页面（要跳转的目的页面）用 NavDestination作为根布局
首页中的Navigation（）必要绑定NavPathStack栈

1. //主页面（PageOne）
2. //栈对象，通过Nav栈进行跳转
3. pageInfos: NavPathStack = new NavPathStack()
5. Navigation(this.pageInfos) {
6.   ...
7.   Button()
8.     .onClick(() => {
9.        //点击按钮,将PageTwo页面入栈并进行跳转
10.        this.pageInfos.pushPath({ name: 'pageTwo' })
11.      })
12. }
13. //隐藏标题栏
14. .hideTitleBar()
18. //子页面（PageTwo）
19. NavDestination() {
20.   ...
21. }

复制代码

在跳转之前必要在app/entry/src/main/resources/base/profile中新建文件route_map.json文件名可以随意，在文件中对子页面进行注册，并在PageTwo文件中写一个builder方法，末了在app/entry/src/main/module.json5，module.json5中绑定route_map.json,末了可以完成跳转

1. //route_map.json
2. {
3.   "routerMap": [
4.     {
5.       //该name是跳转时pushpath里面传的name
6.       "name": "pageTwo",
8.       //PageTwo页面路径，只支持src/main开头
9.       "pageSourceFile": "src/main/ets/pages/PageTwo.ets",
11.       //PageTwo页面中的build方法
12.       "buildFunction": "PageTwoBuilder"
13.     }
14.   ]
15. }
19. //pageTwo.ets
20. //此处的方法名与上方json文件方法名一致
21. @Builder
22. export function PageTwoBuilder(name: string, param: Object) {
23.   PageTwo()
24. }
26. @Entry
27. @Component
28. export struct PageTwo {
29.     ...
30. }
33. //module.json5
35. {
36.   "module": {
38.       "routerMap": "$profile:route_map"
40.    }
41. }

复制代码

 在我们从PageOne页面跳转到PageTwo页面之后，我们要将PageOne中的NavPathStack对象转达给PageTwo，以保证主页面与子页面是同一栈，也方便PageTwo以后跳转到PageThree

1. //PageTwo.ets
2. @Entry
3. @Component
4. export struct PageTwo {
5.   nav : NavPathStack = new NavPathStack()
6.   build(){
7.     NavDestination(){
8.         ...
9.     }.onReady((context: NavDestinationContext) => {
10.       //将上个页面的NavPathStack对象赋值给当前页面
11.       this.nav = context.pathStack
12.     })
13.   }
14. }

复制代码

提示主页面是无法入栈的,只能主页面跳子页面大概子页面之间互相跳转 
详细的其他跳转Api以及传值在这里就不概括了，详细可以参考华为官方文档进行开辟Navigation-底子组件-ArkTS组件-ArkUI（方舟UI框架）-应用框架 | 华为开辟者联盟 (huawei.com)

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。