VueJs - 在重定向到页面之前获取数据

Question

在mounted 函数中，我创建了一个动作，该动作将fetch 数据从Rest Api 传输到我在vuejs 组件中的表

mounted() {
    UserService.getProjects().then(
      (response) => {
        this.isProject = true;
        this.projects = response.data;
      },
      (error) => {
        this.isProject = false;
      }
    );
}

但是，当我单击指向此页面的路线上的菜单时，我会在一秒钟内被重定向到此页面，但我的数据仍在加载中，并且一开始我有一个空表...，如何获取数据然后重定向到这个页面？感谢您的帮助

ps。我使用router-link 导航到另一个页面

Answer 1

要回答您的确切问题，您可以查看Navigation Guards。

在你的路由器中，做类似的事情

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        UserService.getProjects().then(
          (response) => {
            // update store or some state
            next()
          },
          (error) => {
            // update store or some state
            next(false); //cancel or handle the error
          }
        );
      }
    }
  ]
})

但您可能不想在数据加载之前延迟路由转换。相反，您希望在数据准备好之前显示加载状态。所以你只需在你的模板和现有的mounted 函数中处理它，就像你所做的那样。

通过阻止导航，您必须决定当数据加载失败时该怎么做

Answer 2

您可以尝试在挂载的挂钩上使用async 和await。

async mounted() {
    await UserService.getProjects().then(
      (response) => {
        this.isProject = true;
        this.projects = response.data;
      },
      (error) => {
        this.isProject = false;
      }
    );
}

或者你也可以使用 Promise。

async mounted() {
    await Promise.all(
    UserService.getProjects().then(
      (response) => {
        this.isProject = true;
        this.projects = response.data;
      },
      (error) => {
        this.isProject = false;
      }
    );)
}