跟着JHipster学做项目 (13) 控制Vue前端在完成加载数据后展现页面

最新推荐文章于 2024-08-13 11:29:48 发布

java_augur

最新推荐文章于 2024-08-13 11:29:48 发布

阅读量538

点赞数

本文链接：https://blog.youkuaiyun.com/java_augur/article/details/108818930

版权

JHipster 同时被 3 个专栏收录

22 篇文章

订阅专栏

Vue

17 篇文章

订阅专栏

MVC

4 篇文章

订阅专栏

本文介绍Vue应用中确保数据加载完成后才展示页面的方法。通过使用beforeRouteEnter钩子和v-if指令，可以有效避免数据未准备好时提前显示页面的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于用Vue开发的前端页面，通常采用Ajax进行数据通讯，页面的控件往往存储在本地。我们直观的感觉是页面组件出现后，数据再显示在组件上，如果网络有延迟，数据滞后显示会更加明显。更严重的情况是上次缓存的数据会出现在页面，对用户造成困扰。

下面就讲述一下JHipster的两种方式实现数据加载完成后，再展现页面。

利用beforeRouteEnter，代码如下：

  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.initAuthorities();
      if (to.params.userId) {
        vm.init(to.params.userId);
      }
    });
  }
  public initAuthorities() {
    this.userManagementService()
      .retrieveAuthorities()
      .then(_res => {
        this.authorities = _res.data;
      });
  }

  public init(userId: string): void {
    this.userManagementService()
      .get(userId)
      .then(res => {
        this.userAccount = res.data;
      });
  }

还可以在页面上利用v-if来控制组件显示

public refresh(): void {
    this.metricsService()
      .getMetrics()
      .then(resultsMetrics => {
        this.metrics = resultsMetrics.data;
        this.metricsService()
          .retrieveThreadDump()
          .then(res => {
            this.updatingMetrics = true;
            this.threadData = res.data.threads;
            this.updatingMetrics = false;
          })
          .catch(() => {
            this.updatingMetrics = true;
          });
      })
      .catch(() => {
        this.updatingMetrics = true;
      });
  }

这里利用updatingMetrics来判断是否显示控件

<div class="row" v-if="!updatingMetrics">

Good Luck,

Cheers!