前一篇页面跳转逻辑为了省事使用的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

1. 明确跳转页面和目标跳转页面

主页面：

image.png

目标页面：

image.png

2. 在resources/base/profile/route_map.json添加路由。

   
   image.png

3. 在module.json5文件中添加"routerMap": "$profile:route_map"

   
   image.png

至此，关于Navigation的简单介绍及使用方法就讲完了，更多api或特性的应用请看官方文档。