鸿蒙Next ArkUI导航返回时如何触发原先页面刷新

在鸿蒙Next中使用ArkUI开发时，遇到页面导航返回时如何触发原先页面的刷新？比如从A页面跳转到B页面，返回A页面时需要根据B页面的操作结果更新数据，应该如何处理？求具体的实现方法或代码示例。

2 回复

鸿蒙Next ArkUI中，页面返回时想刷新？试试router.back()后接router.push()，或者用页面生命周期onPageShow()，返回时自动执行。简单说：要么手动再推一次，要么让页面自己“醒”时干活。代码一写，效果立现！

更多关于鸿蒙Next ArkUI导航返回时如何触发原先页面刷新的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next的ArkUI中，当从下一个页面返回时，可以通过以下方式触发原页面的刷新：

方法一：使用router.back()传递参数

  1. 在目标页面返回时传递数据：

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

// 在目标页面执行返回操作，并携带需要刷新的数据
router.back({
  url: 'pages/OriginalPage', // 原页面路径
  params: { refresh: true }  // 传递刷新标识
});

  2. 在原页面接收参数并刷新：

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

[@Entry](/user/Entry)
[@Component](/user/Component)
struct OriginalPage {
  @State needRefresh: boolean = false;

  onPageShow() {
    // 获取返回时传递的参数
    const params = router.getParams() as { refresh?: boolean };
    if (params?.refresh) {
      this.needRefresh = true;
      this.refreshData(); // 执行刷新逻辑
      // 清除参数避免重复刷新
      router.replace({ url: 'pages/OriginalPage' });
    }
  }

  refreshData() {
    // 这里实现数据刷新逻辑，例如重新请求接口
    console.log('刷新数据');
  }
}

方法二：使用AppStorage全局状态管理

  1. 定义全局状态：

    import { AppStorage } from '[@ohos](/user/ohos).application.AppStorage';

AppStorage.setOrCreate('needRefresh', false);

  2. 目标页面修改状态：

    // 在目标页面返回前设置刷新标志
AppStorage.set('needRefresh', true);
router.back();

  3. 原页面监听状态变化：

    [@Entry](/user/Entry)
[@Component](/user/Component)
struct OriginalPage {
  @StorageLink('needRefresh') needRefresh: boolean = false;

  onPageShow() {
    if (this.needRefresh) {
      this.refreshData();
      AppStorage.set('needRefresh', false); // 重置状态
    }
  }

  refreshData() {
    // 刷新逻辑
  }
}

推荐方案

  • 简单场景：使用方法一，通过路由参数传递。
  • 复杂状态管理：使用方法二，结合AppStorage实现跨页面状态同步。

注意事项

  • 确保在onPageShow生命周期中处理刷新逻辑，避免在构造函数中处理。
  • 及时清除状态或参数，防止重复刷新。

选择适合业务场景的方式即可实现返回时的页面刷新。

回到顶部