鸿蒙Next组件导航 (Navigation)

组件导航（Navigation） 主要用于实现页面间以及组件内部的页面跳转，支持在不同组件间传递跳转参数，提供灵活的跳转栈操作，从而更便捷地实现对不同页面的访问和复用。页面路由 (@ohos.router)(不推荐) 项目配置步骤： 1.在entry项目目录resourses/base/profile下新建一个json文件：route_map.json 2.在entry项目目录中module.json5添加路由表配置：

"routerMap":'$profile:route_map'

3.在跳转目标页面中，需要配置入口Builder函数，例如：

@Builder
export function B_Builder() {
  B()
}

4.route_map.json中添加子页面配置，例如：

 {
      "name": "B",
      "pageSourceFile": "src/main/ets/pages/B.ets",
      "buildFunction": "B_Builder"  //B页面的build函数
    }

本文只演示使用跳转： 代码：

@Entry
@ComponentV2
struct A{
  pageInfos: NavPathStack = new NavPathStack()
  @Local paths:string=''
  @Local backInfo:string=''
  build() {
    Navigation(this.pageInfos){
      Column({space:10}){
        Text(this.paths)
        Text(this.backInfo)
        Button('无参无回调启动B').onClick(()=>{
          this.backInfo=''
          this.pageInfos.pushPath({name:'B'})
        })
        Button('有参无回调启动B').onClick(()=>{
          this.backInfo=''
          this.pageInfos.pushPath({name:'B',param:'数据类可自定义，接收unknown类型'})
        })
        Button('有参有回调启动B').onClick(()=>{
          this.backInfo=''
          this.pageInfos.pushPath({name:'B',param:'这是传过来的参数',onPop:(any)=>{
                // any 是 PopInfo 类型的
                this.backInfo = any.result as string
          }})
        })
        Button('双击会启动2个B').onClick(()=>{
          this.pageInfos.pushPath({name:'B'})
        })
        Button('复用以存在的页面B').onClick(()=>{
          this.pageInfos.pushPath({ name: 'B' },
            { launchMode: LaunchMode.MOVE_TO_TOP_SINGLETON });
        })
      }
    }.title('A')
    .width('100%')
    .height('100%')
  }
}

@Builder
export function B_Builder() {
  B()
}
@Entry
@ComponentV2
struct B{
  pageInfos: NavPathStack = new NavPathStack()
  @Local paths:string=''
  @Local paramInfo:string=''

  onPageShow(): void {
    let paths:Array<string> = this.pageInfos.getAllPathName()
    for(let str of paths){
      this.paths+=str+"->"
    }
  }
  build() {
    NavDestination(){
      Column({space:10}){
        Text('当前路由栈:'+this.paths)
        Text('接受到的参数:'+this.paramInfo)
        Button('TO_B').onClick(()=>{
          this.pageInfos.pushPath({name:'B'})
        })
        Button('TO_C').onClick(()=>{
          this.pageInfos.pushPath({name:'C'})
        })
        Button('返回上一页').onClick(()=>{
          this.pageInfos.pop()
        })
        Button('返回上一页带参数').onClick(()=>{
          this.pageInfos.pop('从B返回的参数')
        })

        Button('复用以存在的页面B').onClick(()=>{
          this.pageInfos.pushPath({ name: 'B' },
            { launchMode: LaunchMode.MOVE_TO_TOP_SINGLETON });
        })

        Button('复用以存在的页面C').onClick(()=>{
          this.pageInfos.pushPath({ name: 'C' },
            { launchMode: LaunchMode.MOVE_TO_TOP_SINGLETON });
        })
      }
    }.title('B')
    .onWillAppear(()=>{

      this.pageInfos.getParamByName("B")
    })
    .onShown(()=>{
      this.paths=''
      let paths:Array<string> = this.pageInfos.getAllPathName()
      for(let str of paths){
        this.paths+=str+"->"
      }
      let parms:Array<string> = this.pageInfos.getParamByName("B") as Array<string>
      for(let str of parms){
        this.paramInfo+=str
      }

    })
    .onReady((context: NavDestinationContext) => {
      this.pageInfos = context.pathStack
    })
  }
}

@Builder
export function C_Builder() {
  C()
}
@Entry
@ComponentV2
struct C{
  pageInfos: NavPathStack = new NavPathStack()
  @Local paths:string=''

  build() {
    NavDestination(){
      Column({space:10}){
        Text(this.paths)
        Button('回首页A').onClick(()=>{
          this.pageInfos.clear()
        })
        Button('TO_B').onClick(()=>{
          this.pageInfos.pushPath({name:'B'})
        })
        Button('TO_C').onClick(()=>{
          this.pageInfos.pushPath({name:'C'})
        })
        Button('返回上一页').onClick(()=>{
          this.pageInfos.pop()
        })
        Button('将B移到栈顶').onClick(()=>{
          this.pageInfos.moveToTop('B')
        })
        Button('将第一个页面移到栈顶').onClick(()=>{
          this.pageInfos.moveIndexToTop(0)
        })

        Button('复用以存在的页面B').onClick(()=>{
          this.pageInfos.pushPath({ name: 'B' },
            { launchMode: LaunchMode.MOVE_TO_TOP_SINGLETON });
        })

        Button('复用以存在的页面C').onClick(()=>{
          this.pageInfos.pushPath({ name: 'C' },
            { launchMode: LaunchMode.MOVE_TO_TOP_SINGLETON });
        })
      }
    }.title('C')
    .onShown(()=>{
      this.paths=''
      let paths:Array<string> = this.pageInfos.getAllPathName()
      for(let str of paths){
        this.paths+=str+"->"
      }
    })
    .onReady((context: NavDestinationContext) => {
      this.pageInfos = context.pathStack
    })
  }
}

route_map.json 配置：

{
  "routerMap": [
    {
      "name": "B",
      "pageSourceFile": "src/main/ets/pages/B.ets",
      "buildFunction": "B_Builder"
    },
    {
      "name": "C",
      "pageSourceFile": "src/main/ets/pages/C.ets",
      "buildFunction": "C_Builder"
    }
  ]
}