HarmonyOS鸿蒙Next应用开发中路由跳转成功但是页面是空白。父页面Navigation跳转子页面NavDestination出现空白

父页面：

@Entry
@Component
struct IndexPage {
  @State message: string = 'Hello World';
  pageStack : NavPathStack = new NavPathStack();

  build() {
    Navigation(this.pageStack){
      Column(){
        Text('IndexPage')
          .fontSize($r('app.float.page_text_font_size'))
        Button('跳转子页面pageOne')
          .fontSize($r('app.float.page_text_font_size'))
          .onClick(()=>{
              this.pageStack.pushPathByName("PageOne","page one")
          })
      }
      .width('100%')
      .height('100%')
    }
    .title('IndexPage首页')
    .titleMode(NavigationTitleMode.Mini)
  }
}

子页面：

@Builder
export function PageOneBuilder(){
  PageOne()
}

@Component
struct PageOne {
  @State message: string = 'Hello World123213213';

  pathStack: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
      Column(){
        Text(this.message)
          .fontSize($r('app.float.page_text_font_size'))
      }
      .width('100%')
      .height('100%')
      .backgroundColor(Color.Black)
    }
    .title('pageOne')
  }
}

module.json5配置

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet",
      "2in1"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "routerMap": "$profile:route_map",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:layered_image",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:startIcon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ],
    "extensionAbilities": [
      {
        "name": "EntryBackupAbility",
        "srcEntry": "./ets/entrybackupability/EntryBackupAbility.ets",
        "type": "backup",
        "exported": false,
        "metadata": [
          {
            "name": "ohos.extension.backup",
            "resource": "$profile:backup_config"
          }
        ],
      }
    ]
  }
}

route_map.json的配置

{
  "routerMap": [
    {
      "name": "PageOne",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "PageOneBuilder",
      "data": {
        "description": "this is PageOne"
      }
    }
  ]
}

项目结构：跳转效果： IndexPage页面

点击跳转子页面：是空白(只有返回箭头)

更多关于HarmonyOS鸿蒙Next应用开发中路由跳转成功但是页面是空白。父页面Navigation跳转子页面NavDestination出现空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 1楼

我用你的代码运行的结果

更多关于HarmonyOS鸿蒙Next应用开发中路由跳转成功但是页面是空白。父页面Navigation跳转子页面NavDestination出现空白的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

yuanlaile 2楼

基本信息

姓名: 张三
年龄: 28
职位: 软件工程师

技能

Java
Python
C++
JavaScript

项目经验

项目一
- 描述: 开发了一个电商网站
- 技术: HTML, CSS, JavaScript
项目二
- 描述: 设计并实现了一个数据分析系统
- 技术: Python, Pandas, NumPy

phonegap100 3楼

问题分析

子页面中错误创建 NavPathStack 实例
- 父页面的 Navigation 组件已管理一个 NavPathStack（pageStack），子页面无需也不应自行创建新的 NavPathStack。子页面中定义的 pathStack: NavPathStack = new NavPathStack(); 会导致路由上下文不一致，导致页面无法正确渲染。
子页面未正确关联父级导航栈
- NavDestination 组件需要依赖父级 Navigation 的导航栈来渲染页面内容。若子页面自行创建导航栈，会脱离父级导航的管理，导致页面空白。

解决方案

步骤1：删除子页面中的多余导航栈实例

修改子页面 PageOne，移除 pathStack 的定义：

@Component
struct PageOne {
    @State message: string = 'Hello World123213213';
    // ❌ 移除这一行（无需自行创建NavPathStack）
    // pathStack: NavPathStack = new NavPathStack();
    build() {
        NavDestination() {
            Column() {
                Text(this.message)
                    .fontSize($r('app.float.page_text_font_size'))
            }
            .width('100%')
            .height('100%')
            .backgroundColor(Color.Black)
        }
        .title('pageOne')
    }
}

步骤2：确保路由配置正确引用Builder

检查 route_map.json 中 buildFunction 是否正确指向子页面的Builder函数（当前配置正确，无需修改）：

{
    "routerMap": [
        {
            "name": "PageOne",
            "pageSourceFile": "src/main/ets/pages/PageOne.ets",
            "buildFunction": "PageOneBuilder", // ✅ 正确引用Builder
            "data": {
                "description": "this is PageOne"
            }
        }
    ]
}

步骤3：验证父页面导航栈调用

父页面使用 pushPathByName 跳转时，参数格式正确（路径名 + 携带数据），无需修改：

this.pageStack.pushPathByName("PageOne", "page one"); // ✅ 正确调用

补充说明

NavDestination 的作用：该组件用于定义导航目的地，需作为 Navigation 的子组件或依赖其父级导航栈，无需在子页面中手动管理栈实例。
样式排查：若页面背景与文字颜色相同（如黑色背景 + 黑色文字），可能导致内容不可见。建议临时修改子页面背景色或文字颜色，确认是否为样式问题：

Column() {
    Text(this.message)
        .fontSize(20) // 显式设置字体大小，避免使用未定义的资源
        .color(Color.White) // 文字设为白色
}
.backgroundColor(Color.Gray) // 临时背景色，便于调试

总结

核心问题是子页面错误创建了独立的 NavPathStack，导致脱离父级导航管理。移除子页面的导航栈实例后，NavDestination 会自动关联父级 Navigation 的栈，从而正确渲染内容。若仍有问题，可进一步检查：

route_map.json 路径是否正确（确保 pageSourceFile 指向子页面文件）。
资源引用（如 $r('app.float.page_text_font_size') 是否存在，避免未定义的资源导致布局异常）。

修改后重新编译运行，页面应能正常显示子页面内容。

itying888 4楼

标题

这是段落一。

这是段落二。

yibo5220 5楼

期待HarmonyOS能在未来带来更多创新的技术和理念。

h691938207 6楼

我的版本是这样的

vueper 7楼

访问不到子页面：path找不到

yibo5220 8楼

这个route_map.json配置应该正确

这是module.json5的配置

到底是哪里的问题呢？

yuanlaile 9楼

没有找到router，这个path路径随便换一下，效果就是空白

vueper 10楼

背景黑色去掉

理论上：设置背景为黑色的跳转过去整个页面是黑色的
我看您测试的就OK
您的版本是这个吗？

5.0.5(17)

sinazl 11楼

pageone页面中，

.backgroundColor(Color.Black)

你把背景设置成了黑色，字体颜色也是黑色的，把背景去掉后可以显示啊，其他代码没有问题。

vueper 12楼

把子页面中NavPathStack的实例删掉后，仍旧不能显示子页面的内容。

IndexPage.ets的内容：

@Entry
@Component
struct IndexPage {

  @State message: string = 'Hello World';
  @Provide('pathStack')  pathStack : NavPathStack = new NavPathStack();

  build() {
    Navigation(this.pathStack){
      Column(){
        Text('IndexPage')
          .fontSize($r('app.float.page_text_font_size'))
        Button('跳转子页面pageOne')
          .fontSize($r('app.float.page_text_font_size'))
          .onClick( ()=>{
              this.pathStack.pushPathByName('PageOne',"page one",true)
          })
      }
      .width('100%')
      .height('100%')
    }
    .title('IndexPage首页')
    .titleMode(NavigationTitleMode.Mini)
  }
}

子页面：PageOne.ets

@Builder
export function PageOneBuilder(){
  PageOne()
}

@Component
export struct PageOne {
  @State message: string = 'PageOne';
  build() {
    NavDestination() {
      Column(){
        Text(this.message)
          .fontSize($r('app.float.page_text_font_size'))
      }
      .width('100%')
      .height('100%')
      .backgroundColor(Color.Black)
    }
    .title('pageOne')
  }
}

效果：

空白：

h691938207 13楼

鸿蒙Next路由跳转空白问题可能原因：

NavDestination页面未正确加载资源
页面组件树未完整构建
路由路径配置错误导致加载了空布局
页面生命周期方法未正常执行

排查方法：

检查NavDestination页面的@CustomDialog或@Entry修饰器是否正确定义
验证页面build()方法是否返回了完整UI组件
确认路由URL与目标页面路径完全匹配
检查页面aboutToAppear()生命周期是否被触发

wuwangju 14楼

从代码和配置来看，出现空白页面的主要原因是子页面PageOne的结构问题。在HarmonyOS Next中，NavDestination需要正确的构建方式。

主要问题点：

子页面PageOne中重复定义了pathStack，这是不需要的
NavDestination的构建方式需要调整

修改建议：

@Component
struct PageOne {
  @State message: string = 'Hello World123213213';

  build() {
    Column(){
      Text(this.message)
        .fontSize($r('app.float.page_text_font_size'))
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Black)
  }
}

@Builder
export function PageOneBuilder(){
  NavDestination() {
    PageOne()
  }
  .title('pageOne')
}

关键修改：

移除子页面中多余的pathStack定义
将NavDestination的构建逻辑移到Builder函数中
保持PageOne组件只包含UI内容

这样修改后，路由跳转应该能正常显示子页面内容。确保route_map.json中的buildFunction正确指向PageOneBuilder。