HarmonyOS鸿蒙Next中路由跳转失败

HarmonyOS鸿蒙Next中路由跳转失败 为什么路由跳转会成这样子，之前学习的时候也是这样的情况。

在做HarmonyOS第一课基础课程-学习路径5的页面与跳转案例时，路由跳转失败

cke_333.png cke_566.png

代码： route_map.json: cke_22034.png

module.json5部分代码:

cke_28644.png

登录页面代码：cke_33165.png

路由导航子页面代码：cke_40398.png

我是真没招了，那个案例基本都是照抄的，写完之后还照着提供的代码核对了一遍。

难道说是编译器预览的bug？求助各位大佬！


更多关于HarmonyOS鸿蒙Next中路由跳转失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

  1. 路由后页面空白问题： 不是预览器BUG，是 路由表 不支持预览器： cke_70681.jpeg 可以使用模拟器进行调试应用： cke_2608.jpeg弹窗后点击右下角的“New Emulator”选择合适设备启动模拟器。首次使用需要先下载镜像： cke_7003.jpeg

  2. 非空判断问题：TextInput 组件内没有使用 状态管理V1 的 双向绑定：$$

    TextInput({ placeholder: 'xxx', text: $$this.account })

    所以在首次进入页面后，UI取得变量的内容，但没有和属性建立双向绑定关系 ，双方修改之后，都不会影响对方的值。 使用双向绑定 $$this.account 之后，文本框内的内容就和属性进行了双向绑定。此时修改文本框中的内容，变量的实际值也会跟随改变；反之在其他地方修改了变量内容，文本框中的内容也会跟随改变。你会Vue，当Vue的双向绑定理解就行了，只不过 v-model 的双向绑定是框架自动建立的，ArkTS的部分组件需要显式键入双向绑定符号，当组件中参数支持双向绑定时，会额外说明的： cke_67718.jpeg

参考：

更多关于HarmonyOS鸿蒙Next中路由跳转失败的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


电脑不够配置运行模拟器哈哈，

试一下这个？我有真机所以没试过实际效果什么样，说是每天有360分钟免费时长：https://developer.huawei.com/consumer/cn/doc/app/agc-help-clouddebug-applyequip-0000002254916518

另外还有一个Bug，在LoginPage.ets里，正常来说是不输入会提示非空判断，但是输入账号和密码也显示非空判断，所以我搞了个死数据先用着。
注册功能还没做，所以没法注册，但是写了死数据后跳转页面就变成上面那样啥都没。，

用模拟器跑一下呢？，

还有跳转参数别传null，传{}，

电脑运存不够，模拟器跑不起来，真机模拟也没有鸿蒙5以上的设备😭，

在HarmonyOS Next中，路由跳转失败通常由以下原因导致：

  1. 页面路径未在module.json5中正确配置。
  2. 页面路由栈管理不当，如重复压入同一页面。
  3. 使用了错误的router API或参数格式。
  4. 目标页面未导出或生命周期状态异常。
  5. 页面资源未正确加载或模块依赖缺失。

根据你提供的代码截图，路由跳转失败的主要原因在于 module.json5 中的路由配置与 route_map.json 中的路由名称不匹配。

具体问题分析如下：

  1. 核心矛盾点：

    • 在你的 module.json5 中，你为页面 "LoginPage" 配置的路由名称是 "login"。
    • 而在你的 route_map.json 中，你为页面 "LoginPage" 配置的路由名称是 "LoginPage"。

    这导致了系统在解析路由时，无法将 "LoginPage" 这个页面标识与 route_map.json 中定义的 "LoginPage" 路由路径关联起来。

  2. 解决方案： 你需要确保两个配置文件中的路由名称保持一致。有两种修改方式：

    方案一（推荐，与官方示例保持一致）： 修改 module.json5 中 "LoginPage" 的 "name" 字段，使其与 route_map.json 中的 "name" 一致。 即将：

    {
  "name": "login",
  "pageSourceFile": "src/main/ets/pages/LoginPage"
}

    修改为：

    {
  "name": "LoginPage",
  "pageSourceFile": "src/main/ets/pages/LoginPage"
}

    方案二： 修改 route_map.json 中 "LoginPage" 对应的 "name" 字段，使其与 module.json5 中的 "name" 一致。 即将：

    "LoginPage": {
  "name": "LoginPage",
  "pageSourceFile": "src/main/ets/pages/LoginPage"
}

    修改为：

    "LoginPage": {
  "name": "login",
  "pageSourceFile": "src/main/ets/pages/LoginPage"
}

  3. 其他注意事项：

    • 从你提供的 route_map.json 截图看，"LoginPage" 的 "pageSourceFile" 路径是正确的。
    • 你的页面跳转代码 router.pushUrl({ url: 'pages/LoginPage' }) 是正确的，它指向的是 route_map.json 中定义的页面名称 "LoginPage"。
    • 修改配置后，请清理工程并重新构建（点击DevEco Studio菜单栏的 Build -> Clean Project 和 Build -> Rebuild Project），以确保配置生效。

总结：问题并非编译器预览的bug，而是配置文件间的命名不一致导致的路由解析失败。请按照上述方案修改配置，使 module.json5 和 route_map.json 中对于同一页面的路由名称定义保持一致即可解决。

回到顶部