Question

我有一个App.vue组件，我想加载当前登录的用户。我还想在用户尝试进入登录路线时重定向用户，并且当前登录的用户已经保存在上下文中（他已经登录）。

// inside App.vue component
created() {
  AuthService.getCurrentUser().then((user) => {
    this.user = user;
  });
}

我检查登录组件的created方法是否设置了currentUser，但是当用户尝试转到登录页面时，可能是当前用户的请求还没完。

我的问题是：

如何在App.vue组件加载之前等待数据加载？我看到这样的事情：

waitForData: true,
data(transition) {
  return AuthService.getCurrentUser().then(currentUser => {
    transition.next({ currentUser });
  });
}

实际上并没有等待加载数据并且组件仍然加载。

修改：我了解beforeRouteEnter，但这是App.vue组件，它是所有组件的父组件，而不是特定于路由的组件。

Answer 1

我遇到了一个非常类似的问题，并通过在包含依赖于加载数据的子组件的元素上添加 v-if 来解决。然后当然有一个数据属性来控制v-if。如果您没有包装元素，则始终可以使用template元素进行包装。

Answer 2

这不是处理事情的方式。

使用VUEX存储currentUser对象
在App.vue的计算部分设置vuex getter。一旦数据准备就绪，您的模板将动态更新。

请参阅此page中的mapGetters部分。它与计算机制非常吻合。

您还可以在相关组件中使用v-if，以便在VUEX中准备好数据之前不会创建组件。

Answer 3

使用vue-router，您可以使用beforeRouteEnter防护加载数据异步，如下所述：https://router.vuejs.org/en/advanced/data-fetching.html

Answer 4

我能想到的一种方法是，当用户在App.vue组件中加入以检查当前路径以及它是否\login重定向时。

这样的事情：

created() {
  AuthService.getCurrentUser()
  .then(user => this.setCurrentUser(user))
  .then(() => {
    const { path } = this.$router.currentRoute;
    if (path === '/login') {
      this.$router.push('/');
    }
  });

创建vuejs组件等待数据首先加载

4 个答案: