HarmonyOS 鸿蒙Next中关于next版本的Navigation和NavDestination实现路由跳转的问题?比如跳转的页面是空白的等问题

HarmonyOS 鸿蒙Next中关于next版本的Navigation和NavDestination实现路由跳转的问题?比如跳转的页面是空白的等问题 首先最新版本的API推荐使用Navigation来实现路由跳转,那么

问题1(已解决):很多新手都会有个疑问,如何实现一个标准C端APP的界面带底部tabbar导航的布局如:

上图所示类型, 我搜到了社区答案是Navigation和Tabs分工合作实现(链接

问题2:目前在跨模块跳转,文档里的系统路由表这里感觉是不是没有说清楚,看文档(链接)里指出需要配置route_map即可,那为什么我按照文档要求跳转过去后是空白的?

项目结构如下图:

type为entry类型的phone模块里通过

Button('去支付')
  .backgroundColor('#D54253')
  .fontColor(Color.White)
  .width(200)
  .onClick(() => {
    this.pathStack.pushPathByName("Personal", null)
  })

到features下的personal模块(har类型)

并且配置了route_map.json声明了相关字段

这里两个name的意义区别是什么(注意我的大小写区分)?路由取的是上面的name还是下面的?

在personal的MainPage中是

import { StyleConstants, BreakpointConstants, BreakPointType, CommonDataSource, Logger } from '@ohos/common';
const DOMAIN = 0x0000;

@Builder
export function PersonalBuilder() {
  Personal();
}

@Component
export struct Personal {
  pathStack: NavPathStack = new NavPathStack();
  aboutToAppear(): void {
    Logger.info(DOMAIN.toString(), 'Personal', 'aboutToAppear');
  }

  build() {
    NavDestination() {
      Text('个人中心')
        .fontSize(20)
        .fontColor(Color.Black)
    }.title('个人中心')
    .backgroundColor($r('app.color.page_background'))
    .onReady((ctx: NavDestinationContext) => {
      this.pathStack = ctx.pathStack;
    })
  }
}

在模拟器里是可以执行跳转,但是却空白如下图

问题是,我自己试了下在phone模块的oh-package.json5文件里,如果配置上

dependencies:{
    "@ohos/personal": "../../features/personal"
}

就可以正常跳转显示了,这是什么原因?

这就很奇怪了 ,关于跨模块跳转,我本人的体验是 从A跳到B ,需要在A的oh-package.json5里配置dependencies再按照系统路由表才能跳转,这对吗?


更多关于HarmonyOS 鸿蒙Next中关于next版本的Navigation和NavDestination实现路由跳转的问题?比如跳转的页面是空白的等问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

entry模块中添加这个页面所在的模块依赖就好了

更多关于HarmonyOS 鸿蒙Next中关于next版本的Navigation和NavDestination实现路由跳转的问题?比如跳转的页面是空白的等问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中,Navigation和NavDestination实现路由跳转时出现空白页面可能是以下原因:

  1. 未正确关联NavDestination与目标页面组件
  2. 页面资源未加载完成导致渲染延迟
  3. 路由路径配置错误
  4. 目标页面组件未正确导出

检查点:

  • 确认Navigation的路径与NavDestination的name属性匹配
  • 确保目标页面组件已正确定义并导出
  • 检查页面生命周期回调是否正常执行

关于HarmonyOS Next中Navigation和NavDestination实现路由跳转的问题,以下是关键点分析:

  1. 跨模块路由配置问题:
  • 系统路由表配置正确但页面空白,是因为模块依赖未正确声明。在phone模块的oh-package.json5中添加对personal模块的依赖是必须的,这是模块化开发的正常要求。
  1. route_map.json中的name字段:
  • 第一个name(“Personal”)是路由名称,用于pushPathByName等跳转方法
  • 第二个name(“personal”)是模块名称,用于标识模块
  • 路由跳转使用的是路由名称(第一个name)
  1. 跨模块跳转的正确做法:
  • 必须先在调用方模块的oh-package.json5中声明对目标模块的依赖
  • 然后在目标模块配置route_map.json声明路由
  • 最后通过pushPathByName等方法跳转
  1. 页面空白的原因:
  • 未添加模块依赖时,系统无法加载目标模块的组件
  • 添加依赖后,模块组件可被正确解析和渲染

这种设计是HarmonyOS模块化架构的正常机制,确保模块间的明确依赖关系。

回到顶部