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

我有一个

App.vue

组件，我想在其中加载当前登录的用户。我还希望在用户尝试进入登录路径并且当前登录的用户已保存在上下文中（他已登录）时重定向该用户

我在登录组件的

created

方法中检查了当前用户是否已设置，但是当用户尝试转到登录页面时，可能当前用户的请求未完成

我的问题是：

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

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

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

它实际上并不等待加载数据和组件

---

编辑：我知道

beforeRouteEnter

但这是

App.vue

组件，它是所有组件的父组件，而不是路由特定组件。

如果使用

vue路由器

，您可以使用

beforeRouteEnter

保护异步加载数据，如本文所述：

我可以想到的一种方法是，当用户被租借到

App.vue

组件中时，检查当前路径，如果它是

\login

则重定向

大概是这样的：

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

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

---

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

这不是Vue的做法

使用VUEX存储当前用户对象

在App.vue的计算部分中设置Vuex getter。一旦数据准备就绪，您的模板将动态更新

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

---

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

是的，但这是

App.vue

组件，因为它没有连接到任何路由，所以它不起作用，或者至少我不能让它工作。@Nikola可能会使用类似于

isFetched

state的东西，并在获取状态后使用v-if进行渲染？如果子组件也需要获取依赖于父组件数据的数据呢？