HarmonyOS鸿蒙Next中router.pushUrl过时，怎么改？

HarmonyOS鸿蒙Next中router.pushUrl过时，怎么改？

router.pushUrl(
  { url: 'pages/Home' },       // RouterOptions对象
  router.RouterMode.Standard, // 路由模式（必填）
  (err) => {                  // 回调函数（第三个参数）
    if (err) {
      console.error(err.message);
    }
  }
);

这是DevEco studio内置的codegenie给的代码，编译器提示过时了。


更多关于HarmonyOS鸿蒙Next中router.pushUrl过时，怎么改？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

【解决方案】

建议用UIContext中的getRouter获取router实例，并使用对应的方法进行替换。

对于上面的代码，修改后为：

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

class RouterTmp {
  Standard: router.RouterMode = router.RouterMode.Standard;
}

let rtm: RouterTmp = new RouterTmp();

@Entry
@Component
struct Index {
  async routePage() {
    this.getUIContext().getRouter().pushUrl({
        url: 'pages/Home'
      }, rtm.Standard)
      .then(() => {
        console.info('succeeded');
      })
      .catch((error: BusinessError) => {
        console.error(`pushUrl failed, code is ${error.code}, message is ${error.message}`);
      })
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button() {
        Text('next page')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
      }.type(ButtonType.Capsule)
      .margin({ top: 20 })
      .backgroundColor('#ccc')
      .onClick(() => {
        this.routePage();
      })
    }
    .width('100%')
    .height('100%')
  }
}

【背景知识】

Router：提供通过不同的url访问不同的页面，包括跳转到应用内的指定页面、同应用内的某个页面替换当前页面、返回上一页面或指定的页面等。

pushUrl：跳转到应用内的指定页面，通过Promise获取跳转异常的返回结果。

更多关于HarmonyOS鸿蒙Next中router.pushUrl过时，怎么改？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


您在使用router.pushUrl时遇到编译器过时提示，是因为直接调用全局的router模块的pushUrl方法已被废弃。以下是详细解答：

原因分析

  • router.pushUrl接口从API version 18开始废弃（deprecated），并建议使用UIContext中的getRouter方法获取Router实例，再通过该实例调用pushUrl方法。
  • 您的代码中直接使用全局router.pushUrl(...)，这是旧版方式，编译器会提示过时警告。

正确使用方法

  1. 获取当前组件的UIContext实例。
  2. 通过UIContext的getRouter()方法获取Router实例。
  3. 调用Router实例的pushUrl方法（该方法支持相同的参数，但不再废弃）。

修改后的代码示例

import { router } from '@kit.ArkUI'; // 导入router模块，用于RouterMode枚举
import { BusinessError } from '@kit.BasicServicesKit'; // 可选，用于错误处理

// 在您的组件方法中（例如onClick事件中）：
let uiContext = this.getUIContext(); // 获取UIContext实例
let routerInstance = uiContext.getRouter(); // 获取Router实例

// 调用pushUrl方法
routerInstance.pushUrl(
  { url: 'pages/Home' }, // RouterOptions对象
  router.RouterMode.Standard, // 路由模式
  (err: BusinessError) => { // 回调函数
    if (err) {
      console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
    } else {
      console.info('pushUrl success');
    }
  }
);

参考文档

Class (Router)-@ohos.arkui.UIContext (UIContext)-UI界面-ArkTS API-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

HarmonyOS Next中推荐使用router.push代替router.pushUrl。新API采用标准RouterOptions对象作为参数，支持指定目标页面URL和路由模式（标准或单实例）。示例：router.push({url: ‘pages/Index’, mode: RouterMode.Standard})。具体参数配置需参考最新ArkTS API文档。

在HarmonyOS Next中，router.pushUrl已被新的API替代，推荐使用router.push方法。以下是修改后的代码示例：

router.push({
  url: 'pages/Home'
}).catch((err) => {
  console.error(err.message);
});

新方法简化了参数结构，移除了单独的路由模式参数（模式可通过RouterOptions配置），并使用Promise替代回调函数处理异常。请检查DevEco Studio版本并更新SDK以确保兼容性。

回到顶部