Navigation路由跳转

Navigation是路由容器组件，一般作为首页的根容器，适用于模块内和跨模块的路由切换。Navigation子页是NavDestination包含的子组件，使用NavPathStack实现页面路由。

作用: 组件导航(Navigation)支持更丰富的动效、具有一次开发多端部署能力和更灵活的栈操作。

当然，我们今天只说明一下navigation路由的页面跳转。

一、路由容器组件

navigation路由跳转首先需要将navigation作为跟容器来包裹代码。

// 首页
@Entry
@Component
struct Index {
  build() {
    // Navigation 是路由容器组件，一般作为首页的根容器
    Navigation() {
      Tabs(){
        // ...
      }
    }
    .hideTitleBar(true)// 隐藏标题栏
  }
}

然后在工程resources/base/profile 中创建 route_map.json 文件。添加如下配置信息：

{
  "routerMap": [
    {
      "name": "SearchView",  // 跳转页面名称
      "pageSourceFile": "src/main/ets/views/SearchView.ets", // 跳转目标页的路径
      "buildFunction": "SearchViewBuilder", // 跳转目标页的入口函数名称
    }
  ]
}

添加完成后在module.json5中添加路由表配置：

注意：需要使用双引号。

二、路由跳转

配置完成后可以进行路由跳转了。

首页页面跳转：

@Entry
@Component
struct Index {
  // 1. 创建一个路由栈对象，并绑定到 Navigation 组件中
 @Provide pageStack: NavPathStack = new NavPathStack()

  build() {
    // 2. 绑定路由栈到 Navigation 组件
    Navigation(this.pageStack) {
      Button('跳转页面')
        .onClick(() => {
          // 3. 通过路由栈跳转页面，name为页面的名字。param为传递的参数。
          this.pageStack.pushPath({ name: 'xxx', param: 'xxx Param' })
          // this.pageStack.pushPathByName('xxx', 'xxx Param')
        })
    }
    .hideTitleBar(true)// 隐藏导航栏
  }
}

跳转页面：

// 1子页的入口函数，必须以 @Builder 修饰
@Builder
function DemoBuilder() {
   // 2 子页结构，必须以 NavDestination 组件包裹
    NavDestination() {
      Demo()
    }
   .hideTitleBar(true)// 隐藏导航栏
}
@Component
struct Demo {
  //  接收路由栈对象
 @Consume pageStack: NavPathStack 
  
  build() {
    Column() {
        Text('Demo页面')
         .fontSize(30)
         .onClick(()=>{
           // 返回上一页
           this.pageStack.pop()
         })
     }
  }
}

三、参数获取

// 1子页的入口函数，必须以 @Builder 修饰
@Builder
function DemoBuilder() {
   // 2 子页结构，必须以 NavDestination 组件包裹
    NavDestination() {
       Demo()
    }
   .hideTitleBar(true)// 隐藏导航栏
}
@Entry
@Component
struct Demo {
  //  接收路由栈对象
 @Consume pageStack: NavPathStack 
  
  aboutToAppear(){
    // 获取页面的参数，注意返回的是数组类型
    const params = this.pageStack.getParamByName('页面名称') as 类型[]
  }
  build() {
    Column() {
        Text('Demo页面')
         .fontSize(30)
         .onClick(()=>{
           // 返回上一页
           this.pageStack.pop()
         })
     }
  }
}