HarmonyOS鸿蒙Next中配置好rouermap，但是跳转没内容，请大神解答
HarmonyOS鸿蒙Next中配置好rouermap，但是跳转没内容，请大神解答 点击 流程跳转到新的页面，但是新的页面时空白，这是为什么，急求！！！
更多关于HarmonyOS鸿蒙Next中配置好rouermap，但是跳转没内容，请大神解答的实战教程也可以访问 https://www.itying.com/category-93-b0.html
13 回复
检查一下这两个文件名是否一致。
Navigation跳转不支持预览器，要使用真机或远程模拟器看效果。
更多关于HarmonyOS鸿蒙Next中配置好rouermap，但是跳转没内容，请大神解答的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
写了个Demo，你看看你的代码哪里少了啥的
Index页：
@Entry
@Component
struct Index {
@Provide('pathInfos') pathInfos: NavPathStack = new NavPathStack();
build() {
Navigation(this.pathInfos) {
Column() {
Button("点击跳转到下一个页面")
.onClick(() => {
this.pathInfos.pushPathByName("SecondPage", null);
});
}
.width("100%")
.height("100%")
.padding(20);
}
.width("100%")
.height("100%");
}
}
secondPage页：
@Builder
export function SecondPageBuilder() {
SecondPage();
}
@ComponentV2
export struct SecondPage {
pathInfos: NavPathStack = new NavPathStack();
build() {
NavDestination() {
Column() {
Text("第二个页面");
}
.width("100%")
.height("100%")
.padding(20);
}
.width("100%")
.height("100%")
.onReady((ctx: NavDestinationContext) => {
this.pathInfos = ctx.pathStack;
});
}
}
模块下面的module.json5里面要添加这一个：
{
"module": {
"name": "entry",
"type": "entry",
"description": "$string:module_desc",
"mainElement": "EntryAbility",
"deviceTypes": [
"phone"
],
"deliveryWithInstall": true,
"installationFree": false,
"pages": "$profile:main_pages",
"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": [
"ohos.want.action.home"
]
}
]
}
],
"extensionAbilities": [
{
"name": "EntryBackupAbility",
"srcEntry": "./ets/entrybackupability/EntryBackupAbility.ets",
"type": "backup",
"exported": false,
"metadata": [
{
"name": "ohos.extension.backup",
"resource": "$profile:backup_config"
}
],
}
],
// 新增
"routerMap": "$profile:router_map"
}
}
在该模块下的resource/base/profile里添加router_map.json文件：
{
"routerMap": [
{
"name": "SecondPage",
"pageSourceFile": "src/main/ets/pages/SecondPage.ets",
"buildFunction": "SecondPageBuilder"
}
]
}
{
"routerMap": [
{
"name": "WEDDING_WORKFLOW",
"pageSourceFile": "src/main/ets/pages/workflow/Index.ets",
"buildFunction": "WorkFlowBuilder"
}
]
}
/**
* 通用类型
*/
export interface SpecItem {
// 显示
label: string;
// 存值
val: string;
}
/**
* 通用类型 img
*/
export interface ItemImg extends SpecItem {
img: Resource;
}
/**
* 通用类型 page
*/
export interface ItemPage extends SpecItem {
page: string;
}
/**
* 通用类型 page_img
*/
export interface ItemImgPage extends SpecItem {
page: string;
img: Resource;
}
import { ItemImgPage } from '../../common/model/SpecItem';
import { GenericDialog } from '../../common/dialog/GenericDialog';
@Component
export struct MyIndex {
// 功能
private itemPages: ItemImgPage[] = [
{
label: '流程',
val: 'WEDDING_WORKFLOW',
img: $r('app.media.emoji_image_0_0'),
page: '/pages/workflow/Index'
}
]
// 滚动条
private scroller: Scroller = new Scroller();
// 路由
@Consume('navPathStack') navPathStack: NavPathStack;
// 弹窗
controller: CustomDialogController = new CustomDialogController({
builder: GenericDialog({
onConfirm: () => {
this.confirm()
},
onCancel: () => {
this.cancel()
}
})
})
/**
* 确认
*/
confirm() {
console.log("-------这是确认-------")
}
/**
* 取消
*/
cancel() {
console.log("-------取消-------")
}
build() {
Scroll(this.scroller) {
Column({ space: 36 }) {
List({ space: 30 }) {
ForEach(this.itemPages, (item: ItemImgPage) => {
ListItem() {
this.ItemPageBuilder(item)
}.width('100%').borderRadius(8)
.clip(true)
.onClick(() => {
// this.controller.open()
// 打印日志
console.info(item.val+this.navPathStack.size())
this.navPathStack.pushPathByName(item.val, null);
})
})
}
.width('95%')
.height('auto')
.borderRadius(8)
.clip(true)
.margin({ bottom: 10 })
.divider({
strokeWidth: 1,
startMargin: 10,
endMargin: 10,
color: '#ffe9f0f0'
})
}
.width('100%')
}
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Off)
.width('100%')
.height('100%')
.align(Alignment.Top)
.backgroundColor($r('app.color.page_bg_color'))
}
/**
* 局部组件
* @param item 数组对象
*/
@Builder
ItemPageBuilder(item: ItemImgPage) {
Row({ space: 6 }) {
Image(item.img)
.height('60px').objectFit(ImageFit.Cover).borderRadius(8)
Text(item.label)
.maxFontSize(16)
.margin(2)
.minFontSize(10)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
}
.width('100%')
.backgroundColor('#FFFFFF')
.alignItems(VerticalAlign.Center)
.padding({ left: '17.6px', right: '17.6px' })
.width('100%')
}
}
import { GenericBtn } from '../../common/btn/GenericBtn';
import { FlowTimeline } from './FlowTimeline';
import { FlowTips } from './FlowTips';
@Builder
export function WorkFlowBuilder() {
WorkFlowIndex()
}
/**
* 流程配置
*/
@Component
export struct WorkFlowIndex {
// 创建滚动条实例
private scroller: Scroller = new Scroller();
@Consume('navPathStack') navPathStack: NavPathStack;
/**
* 保存
*/
confirm() {
console.log("-------保存数据-------")
}
/**
* 取消
*/
cancel() {
console.log("-------取消保存-------")
}
build() {
NavDestination() {
Column({ space: 20 }) {
// 启用滚动功能
Scroll(this.scroller) {
FlowTimeline() // 显示流程时间轴
}
.scrollable(ScrollDirection.Vertical) // 启用垂直滚动
.scrollBar(BarState.Off) // 隐藏滚动条
.width('100%') // 设置滚动区域宽度
.height('auto') // 调整高度为80%保留底部空间
.align(Alignment.Top) // 内容顶部对齐
.margin({ bottom: 10 })
}
.width('100%') // 设置容器宽度为100%
.padding(10)
}
.title('配置所需流程')
}
}
import { MyIndex } from './my/Index';
import { SquareIndex } from './square/Index';
import { WeddingIndex } from './wedding/Index';
@Entry
@Component
struct Index {
@State currentIndex: number = 1;
private tabsController: TabsController = new TabsController();
@Provide('navPathStack') navPathStack: NavPathStack = new NavPathStack();
@Builder
tabBuilder(title: string, targetIndex: number, icon: Resource) {
Column() {
Image(icon)
.width("24vp")
.height("24vp")
.objectFit(ImageFit.Contain)
.fillColor(this.currentIndex === targetIndex ? ($r('app.color.app_icon_pressed_color')) :
($r('app.color.app_icon_color')))
Text(title)
.fontSize("10vp")
.fontColor(this.currentIndex === targetIndex ? ($r('app.color.app_icon_pressed_color')) :
($r('app.color.app_icon_color')))
.textAlign(TextAlign.Center)
.lineHeight("14vp")
.fontWeight(500)
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.onClick(() => {
this.currentIndex = targetIndex;
this.tabsController.changeIndex(targetIndex);
})
}
build() {
Column() {
Navigation(this.navPathStack) {
Tabs({
barPosition: BarPosition.End,
controller: this.tabsController
}) {
TabContent() {
MyIndex()
}.tabBar(this.tabBuilder('我的', 2, $r("app.media.lib_icon_9")))
}
.barWidth("100%")
.barHeight("36vp")
.barMode(BarMode.Fixed, { nonScrollableLayoutStyle: LayoutStyle.ALWAYS_CENTER })
.vertical(false)
.scrollable(false)
.width('100%')
.height('100%')
}
.hideTitleBar(true)
.mode(NavigationMode.Stack)
}.height('100%')
.width('100%')
.backgroundColor($r('app.color.page_bg_color'))
}
}
检查routermap配置的路径与页面组件路径是否一致。确认目标页面已在对应路径下正确注册。检查页面组件的代码是否存在语法或逻辑错误。确保跳转时传递的参数与目标页面预期接收的参数匹配。
根据你提供的截图，问题很可能出在路由配置的路径（path）与页面组件文件的实际路径不匹配。
从你的 routermap.ets 文件截图来看，你为 FlowPage 配置的 path 是 'pages/FlowPage'。这意味着路由器会尝试加载位于 pages/FlowPage 目录下的页面组件。
然而，从你的项目文件结构截图看，FlowPage.ets 文件的实际位置是 feature/flowpage/src/main/ets/pages/FlowPage.ets。
这里的关键点在于，routermap 中配置的路径是相对于 应用的 ets 目录 的。你的配置 'pages/FlowPage' 会让系统去查找 [你的项目]/ets/pages/FlowPage.ets，但这个文件并不存在，导致加载失败并显示空白页。
解决方案：
你需要将 routermap.ets 中 FlowPage 的 path 修改为正确的相对路径。
根据你的文件结构，正确的路径应该是：
'feature/flowpage/src/main/ets/pages/FlowPage'
修改后的 routermap.ets 代码片段应如下所示：
{
name: 'FlowPage',
path: 'feature/flowpage/src/main/ets/pages/FlowPage', // 修正后的路径
build: () => import('feature/flowpage/src/main/ets/pages/FlowPage') // 确保import路径也正确
}
请同时检查：
import语句：确保build函数中的动态导入路径import('...')与你修改后的path值指向同一个文件。- 页面组件导出：确认
FlowPage.ets文件使用export default正确导出了页面组件。 - 路径大小写：HarmonyOS Next 对路径大小写敏感，请确保配置中的大小写与文件系统中的完全一致。
修改并保存后，重新编译运行应用，页面跳转应该能正常显示内容。
