前一篇页面跳转逻辑为了省事使用的Router相关api实现跳转，由于Rouer接口在跨模块业务或者一多效果相关场景存在明显的局限性，而且页面跳转有数量限制等原因，官方明确不再推荐使用Router，所以我也替换为Navigation，本文简单介绍一下该接口的特点和使用方法。
Navigation和Navigator的区别
- Navigation组件：是路由导航的根视图容器，一般作为Page页面的根容器使用。相关的api比较多，详见官方文档。
典型用法：
build() {
Navigation() {
// ...
}
.mode(NavigationMode.Auto)
}
- Navigator组件：路由容器组件，提供路由跳转能力，详见官方文档。
典型用法：
build() {
Column() {
Navigator({ target: 'pages/container/navigator/Navigator', type: NavigationType.Back }) {
Text('Return to Navigator Page').width('100%').textAlign(TextAlign.Center)
}
}.width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
}
很多初学者对Navigator和Navigation傻傻分不清，但其实它们的用法还是有很大区别的。
Navigation初认识
Navigation作为路由导航的根视图，主要有两种页面布局模式：单视图、分栏视图，默认为自适应模式。也就是根据页面宽度动态判断单视图还是分栏视图，这对一多开发很友好，也是Navigation的一大特点。具体来讲，就是当页面宽度大于等于一定阈值( API version 9及以前：520vp，API version 10及以后：600vp )时，Navigation组件采用分栏模式，反之采用单栏模式。
Navigation作为根视图，通过传入一个页面栈对象，实现路由跳转。 Navigation路由相关的操作都是基于页面栈NavPathStack提供的方法进行，每个Navigation都需要创建并传入一个NavPathStack对象，用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。
例如Index作为项目主入口，点击Button，调用NavPathStack的api实现跳转。
@Entry
@Component
struct Index {
// 创建一个页面栈对象并传入Navigation
pageStack: NavPathStack = new NavPathStack()
build() {
Navigation(this.pageStack) {
Button('Push DialogPage')
.margin(20)
.width('80%')
.onClick(() => {
this.pageStack.pushPathByName('DialogPage', '');
})
}
.title('Main')
}
}
跳转到新的页面PageSecond
@Component
export struct DialogPage {
@Consume('NavPathStack') pageStack: NavPathStack;
build() {
NavDestination() {
Stack({ alignContent: Alignment.Center }) {
Column() {
Text("Dialog NavDestination")
.fontSize(20)
.margin({ bottom: 100 })
}
}.height("100%").width('100%')
}
.backgroundColor('rgba(0,0,0,0.5)')
.hideTitleBar(true)
.mode(NavDestinationMode.DIALOG)
}
}
Router切换Navigation
- 明确跳转页面和目标跳转页面
主页面：
目标页面：
-
在resources/base/profile/route_map.json添加路由。
image.png
-
在module.json5文件中添加"routerMap": "$profile:route_map"
image.png
至此，关于Navigation的简单介绍及使用方法就讲完了，更多api或特性的应用请看官方文档。
