【鸿蒙ArkUI路由/导航系列】四：Navigation页面信息查询

原创已于 2025-09-25 14:43:03 修改 · 352 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙 #harmonyos #ArkUI #路由 #Navigation

于 2025-08-17 20:18:05 首次发布

ArkUI路由导航专栏收录该内容

13 篇文章

订阅专栏

作为一个容器组件，开发者可以在NavDestination中增加自定义组件。在自定义组件内部，如果想获取路由信息，开发者可以使用接口queryNavigationInfo与queryNavDestinationInfo查询

1、queryNavigationInfo

开发者可以在Navigation内部的自定义组件中，通过queryNavigationInfo接口查询Navigation相关的路由信息，例如，在NavDestination组件中查询其所在的Navigation信息，以及对应的路由控制器：

// QueryNavDest.ets

@Component
struct QueryNavDestination {
 name: string = 'NA'
 stack: NavPathStack = new NavPathStack()

 aboutToAppear(): void {
   // 通过查询NavigationInfo，获取当前的NavPathStack实例
   this.stack = this.queryNavigationInfo()?.pathStack!
   // 通过查询NavigationInfo，获取当前所在Navigation的id信息，具体为开发者设置在Navigation上的通用属性`id`
   let navigationId = this.queryNavigationInfo()?.navigationId
   console.log('AceNavigation', 'query navigationInfo in QueryNavDestination, navigationId: ' + navigationId)
 }
 
 build() {
   NavDestination() {
      ...
   }
   .title('QueryNavDestination')
 }
}

2、queryNavDestinationInfo

与queryNavigationInfo相似，开发者可以通过queryNavDestinationInfo查询当前自定义组件所在的NavDestination信息。例如，在自定义组件NaviOperations中查询当前navDestination页面的name、param与mode。

关于返回值NavDestinationInfo的更多信息，请参见：自定义组件内置方法-自定义组件-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)

// QueryNavDest.ets

@Component
struct QueryNavDestination {
 name: string = 'NA'
 stack: NavPathStack = new NavPathStack()

 build() {
   NavDestination() {
     // 将内容区封装至自定义组件NaviOperations()中
     NaviOperations()
   }
   .title('QueryNavDestination')
 }
}

@Component
struct NaviOperations {
 stack: NavPathStack = new NavPathStack()

 aboutToAppear(): void {
   // 通过查询NavDestinationInfo，获取当前所在NavDestination的name。
   let name = this.queryNavDestinationInfo()?.name
   console.log('AceNavigation', 'query navDestination in NaviOperations, navDestination name: ' + name)
   // 通过查询NavDestinationInfo，获取当前所在NavDestination的路由参数。开发者可以通过不同的自定义参数来控制页面展示不同的内容。
   let param = this.queryNavDestinationInfo()?.param
   // 注意！出于安全与隐私的考虑，路由参数不要明文输出！如下仅做示例
   console.log('AceNavigation', 'query navDestination in NaviOperations, navDestination param: ' + JSON.stringify(param))
   // 通过查询NavDestinationInfo，获取当前所在NavDestination的模式，0为标准页面，1为dialog类型页面，也就是透明的弹窗类型页面。
   let navDestinationMode = this.queryNavDestinationInfo()?.mode
   console.log('AceNavigation', 'query navDestination in NaviOperations, navDestination mode: ' + navDestinationMode)
 }

 build() {
   Column() {...}
}

从API18开始，可以通过指定入参isInner来控制查找方向：当为false时，会查找当前自定义组件外部的第一个NavDestination的信息，与上文中的接口行为一致。当为true时，会查找当前自定义组件内部的第一个NavDestination的信息。例如，在navigation外增加按钮，随时查询当前自定义组件内部的第一个navDestination的信息：

// QueryNavigation.ets

@Component
struct QueryNavigation {
 stack: NavPathStack = new NavPathStack()

 aboutToAppear(): void {
   this.stack.pushPath({name: 'queryPageOne'})
 }

 build() {
   Column() {
     Button('向内queryNavDestinationInfo')
       .width(330)
       .margin(7)
       .onClick(() => {
         // 通过查询NavDestinationInfo，获取当前自定义组件内部的第一个NavDestination的name。
         let name = this.queryNavDestinationInfo(true)?.name
         console.log('AceNavigation', 'query navDestination in QueryNavigation, navDestination name: ' + name)
         // 通过查询NavDestinationInfo，获取当前自定义组件内部的第一个NavDestination的路由参数。开发者可以通过不同的自定义参数来控制页面展示不同的内容。
         let param = this.queryNavDestinationInfo(true)?.param
         // 注意！出于安全与隐私的考虑，路由参数不要明文输出！如下仅做示例
         console.log('AceNavigation', 'query navDestination in QueryNavigation, navDestination param: ' + JSON.stringify(param))
         // 通过查询NavDestinationInfo，获取当前自定义组件内部的第一个NavDestination的模式，0为标准页面，1为dialog类型页面，也就是透明的弹窗类型页面。
         let navDestinationMode = this.queryNavDestinationInfo(true)?.mode
         console.log('AceNavigation', 'query navDestination in QueryNavigation, navDestination mode: ' + navDestinationMode)
       })
     Navigation(this.stack) {

     }
     .id('QueryNavigation')
     .hideNavBar(true)
   }
 }
}

查询接口方便开发者在分模块开发过程中，能方便的获取当前所处页面的信息，而无需关心自己被哪个页面集成。