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

最新推荐文章于 2024-11-07 13:57:37 发布

原创

最新推荐文章于 2024-11-07 13:57:37 发布 · 561 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #jhipster

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

对于用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.metr