Navigaton实现路由组件之间跳转

1.基本介绍

Navigation是路由容器组件，一般作为首页的根容器，包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。Navigation组件适用于模块内和跨模块的路由切换，一次开发，多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。在不同尺寸的设备上，Navigation组件能够自适应显示大小，自动切换分栏展示效果。

2. 使用步骤

2.1 在父组件上实例化一个NavPathStack

@Provide
// 实例化PageStack
pageStack:NavPathStack = new NavPathStack()
// 用Navigation()将组件内容包裹起来
Navigation(this.pageStack){
// 组件内容
}

2.2 其他组件就是这个父组件的孙子组件了

@Consume
pageStack:NavPathStack

你想在那个组件上使用就是用上面的代码先申明

2.3 跳转组件上需要申明这些步骤

a. 在这个组件上面申明

@Consume
pageStack:NavPathStack

b. 第二步需要定义一个全局的Builder函数将这个组件包裹 ,例如我现在想跳转到TextCompoents这个组件中

@Builder
function  TextBuilder(){
  TextCompoents()
}

@Component
struct TextCompoents {
  aboutToAppear(): void {


  }
  build() {
    Column() {

    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)
  }
}

c. 第三步需要将这个组件用NavDestination包裹起来

@Builder
function TextBuilder() {
  TextCompoents()
}

@Component
struct TextCompoents {
  aboutToAppear(): void {


  }

  build() {
    NavDestination(){
      Column() {

      }
      .width('100%')
      .height('100%')
      .backgroundColor(Color.Pink)
    }
  }
}

d. 第四步需要配置一些文件

1. 将Textcompoents记录到路由表中 在这个src/main/resources/base/profile路径下创建一个文件route_map.json，内容如下

{
  "routerMap": [
    {
      "name": "TextCompoents",
      "pageSourceFile": "src/main/ets/pages/TextCompoents.ets",
      "buildFunction": "TextBuilder",
      "data": {
        "description": "这个TextCompoents页面"
      }
    }
  ]
}

3. 在module中配置信息

这样就能实现组件路由跳转

3.使用pushPathByName来实现跳转时传参

在本组件上申明实例化

  @Consume
  stackPath: NavPathStack

使用 this.stackPath.pushPathByName('TextComponents', value)将数据传到TextComponents组件上

如何来接收传递过来的数据

需要使用getParamByName这个来接收参数 this.stackPath.getParamByName("TextComponents")[this.stackPath.getParamByName.length-1] as string(参数的类型) 这样就能得到传来的数据