HarmonyOS 开发——Navigation常见场景&解决方案

最新推荐文章于 2025-10-01 07:22:08 发布

原创

最新推荐文章于 2025-10-01 07:22:08 发布 · 774 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #鸿蒙开发 #移动开发 #Navigation

路由跳转场景

页面跳转是路由最常用的能力，Navigation通过NavPathStack提供了诸多方法，下文以pushDestination方法为例，介绍Navigation的路由跳转相关能力。

页面间跳转

NavPathStack提供了路由管理的能力，通过NavPathStack进行页面跳转，主要适用于页面较多的应用。

Step1：创建NavPathStack对象pageStack，通常使用@Provide进行修饰，方便后续子组件通过@Comsumer获取，以实现子页面的路由跳转。

也可以将pageStack传入路由框架，以实现路由框架开发的开发。

@Entry 
@Component 
struct mainPageView { 
  @Provide('pageStack') pageStack: NavPathStack = new NavPathStack() 
  ... 
  build() { 
    ... 
  } 
}

Step2：构建路由表pageMap，该方法通过@Builder进行修饰，通过传入的pageName属性，返回不同页面。

@Entry 
@Component 
struct mainPageView { 
  @Provide('pageStack') pageStack: NavPathStack = new NavPathStack() 
  @Builder 
  PageMap(pageName: string) { 
    if (pageName === 'loginPage') { 
      loginPageView() 
    } else if (pageName === 'mainPage') { 
      mainPageView() 
    } 
  } 
  build() { 
    ... 
  } 
}

Step3：在build创建Navigation组件（需要传入pageStack参数），通过navDestination属性传入路由表pageMap，并通过pageStack.pushPath()实现页面跳转。

@Entry 
@Component 
struct mainPageView { 
  @Provide('pageStack') pageStack: NavPathStack = new NavPathStack() 
  @Builder 
  pageMap(pageName: string) { 
    if (pageName === 'loginPage') { 
      loginPageView() 
    } else if (pageName === 'mainPage') { 
      mainPageView() 
    } 
  } 
  build() { 
    Navigation(this.pageStack){ 
      ... 
      Button('login').onClick( ent => { 
        let pathInfo : NavPathInfo = new NavPathInfo('loginPage', null) 
        this.pageStack.pushDestination(pathInfo, true); 
      }) 
    }.navDestination(this.pageMap) 
    ... 
  } 
}

页面间参数传递

Navigation的页面间，通过NavPathInfo对象中的params属性，实现从发起页到目标页的数据传递；通过onPop回调参数，实现处理目标页面的返回。

Step1：构建NavPathInfo对象，输入需要传递给目标页面的参数。

params参数：将需要传递的数据封装起来进行传递，无法传递对象里面的函数。具体的支持参数可以参考指南（）

onPop参数：目标页面触发pop时的返回，在回调中通过PopInfo.info.param获取到返回的对象。

// 发起页 mainPage 
let loginParam : LoginParam = new LoginParam() 
// 构建pathInfo对象 
let pathInfo : NavPathInfo = new NavPathInfo('loginPage', loginParam 
  , (popInfo: PopInfo) => { 
    let loginParam : LoginParam = popInfo.info.param as LoginParam;