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

对于用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!