HarmonyOS 鸿蒙Next中NavDestination怎么继续跳转内部页面

HarmonyOS 鸿蒙Next中NavDestination怎么继续跳转内部页面 我有这样一个问题,先说明使用场景
我定义了三个页面

1.打开app的首页  2.用手机验证码登录页面 3.用手机号码与密码登录页面

Login
PhoneLogin
PhoneLoginPassword

我在route_map.json注册了两个子页面

{
  "routerMap": [
    {
      "name": "PhoneLogin",
      "pageSourceFile": "src/main/ets/pages/PhoneLogin.ets",
      "buildFunction": "PhoneLoginBuilder",
      "data": {
        "description" : "this is PhoneLogin Page"
      },
      "name": "PhoneLoginPassword",
      "pageSourceFile": "src/main/ets/pages/PhoneLoginPassword.ets",
      "buildFunction": "PhoneLoginPasswordBuilder",
      "data": {
        "description" : "this is PhoneLoginPassword Page"
      }
    }
  ]
}

然后我在Login定义了

Navigation

使用

pathStack:NavPathStack = new NavPathStack();

用pathbyname跳转到验证码登录页面

this.pathStack.pushPathByName('PhoneLogin', null)

虽然有系统级的返回 滑动一下就可以返回主页面 但我想知道 NavDestination()包裹的验证码登录 和密码登录页面怎么相互跳转呢 验证码登录按钮 如何按自定义的button按钮返回呢？
我想使用这个this.pageStack.pop();

但是在 NavDestination()的pagestack 和 主页面的不是一个啊 我该怎么做 我想要一份相关教程


更多关于HarmonyOS 鸿蒙Next中NavDestination怎么继续跳转内部页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

问题分析

NavPathStack的实例应与所有子页面共享，确保Login父页面与PhoneLogin/PhoneLoginPassword子页面操作同一路由栈。需通过参数传递或@Provide装饰器共享栈实例。

当前route_map.json存在重复的name字段（两个页面均定义为"name": “PhoneLogin”），需改为独立名称：

{
  "routerMap": [
    {
      "name": "PhoneLogin",
      "pageSourceFile": "src/main/ets/pages/PhoneLogin.ets",
      "buildFunction": "PhoneLoginBuilder"
    },
    {
      "name": "PhoneLoginPassword",
      "pageSourceFile": "src/main/ets/pages/PhoneLoginPassword.ets",
      "buildFunction": "PhoneLoginPasswordBuilder"
    }
  ]
}

解决办法

父页面共享路由栈：通过@Provide装饰器全局共享NavPathStack，确保子页面可访问

// Login.ets
@Entry
@Component
struct Login {
  [@Provide](/user/Provide) pathStack: NavPathStack = new NavPathStack()
  build() {
    Navigation(this.pathStack) {
      // 主页面内容
    }
  }
}

子页面跳转与返回：在子页面中通过@Consume接收路由栈，实现自定义跳转

// PhoneLogin.ets
@Component
struct PhoneLogin {
  [@Consume](/user/Consume) pathStack: NavPathStack
  build() {
    NavDestination() {
      Column() {
        Button('跳转密码登录')
          .onClick(() => {
            this.pathStack.pushPathByName('PhoneLoginPassword', null)
          })
        
        Button('自定义返回')
          .onClick(() => {
            this.pathStack.pop() // 返回上一页
          })
      }
    }
  }
}

更多关于HarmonyOS 鸿蒙Next中NavDestination怎么继续跳转内部页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


解决了 请后来的朋友们可以看看这个文档
https://developer.huawei.com/consumer/cn/doc/architecture-guides/tools-v1_2-ts_48-0000002353524397

在HarmonyOS Next中，NavDestination内部页面跳转需通过NavController的navigate方法实现。使用NavDestinationBuilder构建路由目标，指定目标页面的route或自定义组件。在页面组件内调用NavController.navigate()并传入目标route参数即可完成跳转。无需额外配置，系统自动管理导航栈。

在HarmonyOS Next中，NavDestination内部的页面跳转可以通过当前页面的NavPathStack实例进行操作。你可以在PhoneLogin页面中通过getNavPathStack()方法获取到当前的导航栈，然后使用pushPathByName进行页面跳转。

例如，在PhoneLogin.ets中，添加按钮事件跳转到PhoneLoginPassword：

import router from '@ohos.router';

@Entry
@Component
struct PhoneLogin {
  private navPathStack: NavPathStack = router.getNavPathStack();

  build() {
    Column() {
      Button('跳转到密码登录')
        .onClick(() => {
          this.navPathStack.pushPathByName('PhoneLoginPassword', null);
        })
    }
  }
}

返回操作可以使用pop()方法：

Button('返回')
  .onClick(() => {
    this.navPathStack.pop();
  })

确保route_map.json中正确注册了页面名称，NavPathStack操作基于当前导航栈上下文，无需从外部传入。

回到顶部