鸿蒙Next中router如何实现跳转回调

在鸿蒙Next中，使用router进行页面跳转时如何实现跳转回调？比如我想在跳转成功后执行一些操作，或者在跳转失败时进行错误处理，应该怎么做？有没有具体的代码示例可以参考？

2 回复

鸿蒙Next里router跳转回调？简单！用router.pushUrl()时，带上AsyncCallback参数就行。成功就执行onSuccess，失败就进onFail。代码大概长这样：

router.pushUrl({
  url: 'pages/OhNoPage'
}, (err, data) => {
  if (err) {
    console.log('跳转失败，原因：' + JSON.stringify(err))
    return
  }
  console.log('跳转成功！')
})

记住：失败时别哭，成功时别飘！😄

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


在鸿蒙Next中，可以通过router模块的pushUrl方法实现页面跳转，并使用AsyncCallback接收跳转结果回调。具体步骤如下：

  1. 导入router模块：

    import router from '[@ohos](/user/ohos).router';

  2. 使用pushUrl方法跳转并设置回调：

    router.pushUrl({
  url: 'pages/目标页面',  // 目标页面的路径
}, router.RouterMode.Standard, (err) => {
  if (err) {
    console.error('跳转失败:', err);
    // 处理跳转失败逻辑
    return;
  }
  console.info('跳转成功');
  // 处理跳转成功逻辑
});

参数说明：

  • url：目标页面的路径（需在main_pages.json中配置）。
  • router.RouterMode.Standard：标准模式（可选单例模式Single）。
  • AsyncCallback：回调函数，跳转完成后触发。err为null表示成功，否则包含错误信息。

注意事项：

  • 确保目标页面路径正确且在配置文件中声明。
  • 回调仅通知跳转操作是否成功，不处理页面间数据传递（需使用params参数）。

示例完整代码：

import router from '[@ohos](/user/ohos).router';

// 在按钮点击或其他触发跳转的事件中调用
onClick() {
  router.pushUrl({
    url: 'pages/DetailPage',
  }, router.RouterMode.Standard, (err) => {
    if (err) {
      console.error('跳转失败，错误码：' + err.code);
      return;
    }
    console.info('跳转到DetailPage成功');
  });
}

通过以上方式，即可在鸿蒙Next中实现带回调的页面跳转。

回到顶部