Navigation
组件是页面架构设计的基石,也是项目模块化设计的重要组成部分,它主要包含导航(NavBar)和子页(NavDestination)。导航页包含内容区、标题栏、菜单栏和工具栏,而子页主包含内容区、标题栏和菜单栏。

子页面NavDestination
是Navigation子页面的根容器,用于承载子页面的一些特殊属性以及生命周期等。NavDestination可以设置独立的标题栏和菜单栏等属性,使用方法与Navigation相同
@Component
export struct DialogPage {
@Consume('NavPathStack') pageStack: NavPathStack;
build() {
NavDestination() {
Stack({ alignContent: Alignment.Center }) {
Column() {
Text("Dialog NavDestination")
.fontSize(20)
.margin({ bottom: 100 })
Button("Close").onClick(() => {
this.pageStack.pop()
}).width('30%')
}
.justifyContent(FlexAlign.Center)
.backgroundColor(Color.White)
.borderRadius(10)
.height('30%')
.width('80%')
}.height("100%").width('100%')
}
.backgroundColor('rgba(0,0,0,0.5)')
.hideTitleBar(true)
.mode(NavDestinationMode.DIALOG)
}
}
路由操作
路由操作主要包括管理页面在栈中的进出栈、参数传递与获取、路由拦截等逻辑,这些操作都是由NavPathStack完成的。路由拦截常用于在跳转时进行hook,针对某些逻辑做特殊处理,例如某些页面需要登录才可以进入,此时就可以在拦截器中统一处理,判断当前用户是否登录,若没有登录,就中断拦截当前跳转逻辑,然后重定向到登录页面。
this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.pushPathByName("PageOne", "PageOne Param")