鸿蒙 Next 组件导航 (Navigation)

2025-06-23
北京
本文字数：2670 字
阅读完需：约 9 分钟

组件导航（Navigation） 主要用于实现页面间以及组件内部的页面跳转，支持在不同组件间传递跳转参数，提供灵活的跳转栈操作，从而更便捷地实现对不同页面的访问和复用。页面路由 (@ohos.router)(不推荐)

项目配置步骤：

1.在 entry 项目目录 resourses/base/profile 下新建一个 json 文件：route_map.json

2.在 entry 项目目录中 module.json5 添加路由表配置：

"routerMap":'$profile:route_map'

复制代码

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

@Builderexport function B_Builder() {  B()}

复制代码

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

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

复制代码

本文只演示使用跳转：

代码：

@Entry@ComponentV2struct 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%')  }}

复制代码

@Builderexport function B_Builder() {  B()}@Entry@ComponentV2struct 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    })  }}</string></string></string></string>

复制代码

@Builderexport function C_Builder() {  C()}@Entry@ComponentV2struct 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    })  }}</string>

复制代码

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"    }  ]}