学习笔记（三十七）：ArkTs-组件导航 (Navigation)-路由操作

概述：

Navigation路由相关的操作都是基于页面栈NavPathStack提供的方法进行，每个Navigation都需要创建并传入一个NavPathStack对象，用于管理页面。

主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能

1、页面跳转

this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.pushPathByName("PageOne", "PageOne Param")

 

2、页面返回

// 返回到上一页
this.pageStack.pop()
// 返回到上一个PageOne页面
this.pageStack.popToName("PageOne")
// 返回到索引为1的页面
this.pageStack.popToIndex(1)
// 返回到根首页（清除栈中所有页面）
this.pageStack.clear()

 

3、页面替换

// 将栈顶页面替换为PageOne
this.pageStack.replacePath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.replacePathByName("PageOne", "PageOne Param")

 

4、页面删除

// 删除栈中name为PageOne的所有页面
this.pageStack.removeByName("PageOne")
// 删除指定索引的页面
this.pageStack.removeByIndexes([1,3,5])

 

5、参数获取

// 获取栈中所有页面name集合
this.pageStack.getAllPathName()
// 获取索引为1的页面参数
this.pageStack.getParamByIndex(1)
// 获取PageOne页面的参数
this.pageStack.getParamByName("PageOne")
// 获取PageOne页面的索引集合
this.pageStack.getIndexByName("PageOne")

 

使用示例：

1、定义一个根视图容器，注意该页面需要配置在main_pages.json文件中

// 启动页
@Entry
@Component
struct MainPage {
  pageInfo: NavPathStack = new NavPathStack()
  build() {
    Navigation(this.pageInfo) {
      Column() {
        Text('首页')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button('跳转第二页')
          .onClick(()=>{
            this.pageInfo.pushPathByName("SecondPage",null)
          })
          .margin(10)
      }
      .width('100%')
    }
    .height('100%')
  }
}

 

2、定义一个页面 SecondPage

注意这里没有@Entry ，也不需要在 main_page.json文件中配置路径

// 第二个页面
@Component
struct SecondPage {
  pageInfo: NavPathStack = new NavPathStack()

  build() {
    NavDestination(){
      Row() {
        Column() {
          Button('第二个页面,点击返回上一页')
            .fontWeight(FontWeight.Bold)
            .onClick(()=>{
              // this.pageInfo.pop() // 返回上一页
              // this.pageInfo.clear() // 返回到根首页（清除栈中所有页面）
              // this.pageInfo.popToIndex(1)
              console.log('栈中所有页面name集合',this.pageInfo.getAllPathName())
            })
        }
        .width('100%')
      }
      .height('100%')
    }
    .onReady((context: NavDestinationContext) => {
      this.pageInfo = context.pathStack;  // 注意这里需要使用 context.pathStack ,操作同一个NavPathStack对象
    })
    .hideTitleBar(true) // 隐藏导航
  }
}

@Builder
export function PageBuilder(name: string, param: Object) {
  SecondPage()
}

 

注意，使用Navigation路由进行页面跳转的需要使用路由表

1、在跳转目标模块的配置文件module.json5添加路由表配置：

2、添加完路由配置文件地址后，需要在工程resources/base/profile中创建route_map.json文件。添加如下配置信息： 

默认是没有的，需要自己创建该文件（src/main/resources/base/profile/route_map.json）

{
  "routerMap": [
    {
      "name": "SecondPage",
      "pageSourceFile": "src/main/ets/pages/navigations/SecondPage.ets",
      "buildFunction": "PageBuilder",
      "data": {
        "description" : "这是第二页"
      }
    }
  ]
}

 

参考文档：

1、Navigation与Router对比和如何进行选择

2、组件导航 (Navigation)(推荐)