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

Question

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

// 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

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

Answer 2

我能想到的一种方法是当用户登录 App.vue 组件时检查当前路径，如果是 \login 则重定向。

像这样：

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

Answer 3

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

Answer 4

这不是 Vue 的处理方式。

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

请参阅此 page 中的 mapGetters 部分。它与计算机制配合得很好。

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

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

vuejs component created wait for data to load first

vue-router

vuejs2