鸿蒙开辟（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进行跳转
https://i-blog.csdnimg.cn/direct/16ec3313649f43dd9a3a498000e2454e.png导航页（也就是首页）用Navigation作为根布局，子页面（要跳转的目的页面）用 NavDestination作为根布局
首页中的Navigation（）必要绑定NavPathStack栈
//主页面（PageOne）
//栈对象，通过Nav栈进行跳转
pageInfos: NavPathStack = new NavPathStack()
Navigation(this.pageInfos) {
...
Button()
.onClick(() => {
//点击按钮,将PageTwo页面入栈并进行跳转
this.pageInfos.pushPath({ name: 'pageTwo' })
})
}
//隐藏标题栏
.hideTitleBar()
//子页面（PageTwo）
NavDestination() {
...
} 在跳转之前必要在app/entry/src/main/resources/base/profile中新建文件route_map.json文件名可以随意，在文件中对子页面进行注册，并在PageTwo文件中写一个builder方法，末了在app/entry/src/main/module.json5，module.json5中绑定route_map.json,末了可以完成跳转
//route_map.json
{
"routerMap": [
{
//该name是跳转时pushpath里面传的name
"name": "pageTwo",
//PageTwo页面路径，只支持src/main开头
"pageSourceFile": "src/main/ets/pages/PageTwo.ets",
//PageTwo页面中的build方法
"buildFunction": "PageTwoBuilder"
}
]
}
//pageTwo.ets
//此处的方法名与上方json文件方法名一致
@Builder
export function PageTwoBuilder(name: string, param: Object) {
PageTwo()
}
@Entry
@Component
export struct PageTwo {
...
}
//module.json5
{
"module": {
"routerMap": "$profile:route_map"
}
}
在我们从PageOne页面跳转到PageTwo页面之后，我们要将PageOne中的NavPathStack对象转达给PageTwo，以保证主页面与子页面是同一栈，也方便PageTwo以后跳转到PageThree
//PageTwo.ets
@Entry
@Component
export struct PageTwo {
nav : NavPathStack = new NavPathStack()
build(){
NavDestination(){
...
}.onReady((context: NavDestinationContext) => {
//将上个页面的NavPathStack对象赋值给当前页面
this.nav = context.pathStack
})
}
} 提示主页面是无法入栈的,只能主页面跳子页面大概子页面之间互相跳转
详细的其他跳转Api以及传值在这里就不概括了，详细可以参考华为官方文档进行开辟Navigation-底子组件-ArkTS组件-ArkUI（方舟UI框架）-应用框架 | 华为开辟者联盟 (huawei.com)
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]