鸿蒙Next中如何实现页面跳转的window.loadcontent方法

在鸿蒙Next开发中，使用window.loadContent方法进行页面跳转时遇到问题。具体表现为调用该方法后目标页面未正常加载，或传递参数时出现异常。请问正确的实现方式是什么？是否需要提前配置路由表？能否提供完整的代码示例，包括源页面跳转和目标页面接收参数的写法？

2 回复

在鸿蒙Next里，页面跳转不用window.loadContent，而是用router的pushUrl。比如：

import router from '@ohos.router';
router.pushUrl({ url: 'pages/NextPage' });

简洁高效，还能传参，比传统方法更丝滑！

更多关于鸿蒙Next中如何实现页面跳转的window.loadcontent方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，页面跳转主要通过 Window 的 loadContent 方法实现，用于加载指定页面并显示。以下是具体实现步骤和示例代码：

实现步骤：

  1. 获取当前窗口对象：通过 window.getLastWindow(this) 获取窗口实例。
  2. 调用 loadContent 方法：指定目标页面的路径和回调函数。

示例代码：

import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

// 在源页面中触发跳转
async function jumpToNextPage() {
  try {
    // 获取当前窗口
    let currentWindow = await window.getLastWindow(this);
    // 加载目标页面（假设目标UI文件路径为"pages/NextPage"）
    currentWindow.loadContent("pages/NextPage", (err: BusinessError) => {
      if (err) {
        console.error(`加载页面失败，错误码: ${err.code}, 错误信息: ${err.message}`);
        return;
      }
      console.info("页面跳转成功");
    });
  } catch (error) {
    console.error(`获取窗口失败: ${error}`);
  }
}

注意事项：

  • 路径规范：loadContent 的路径需基于 ets 目录（如 "pages/NextPage" 对应 ets/pages/NextPage.ets）。
  • 异步处理：使用 await/async 或 Promise 处理异步操作，避免阻塞UI。
  • 错误处理：通过回调函数捕获加载失败的错误（如路径错误、资源不存在等）。

替代方案：

若需传递数据，可结合 UIContext 或使用 router 模块的 push 方法（推荐用于复杂导航）：

import { router } from '@kit.ArkUI';
router.pushUrl({ url: 'pages/NextPage' });

以上为鸿蒙Next中 window.loadContent 的基本用法，适用于简单页面跳转场景。

回到顶部