时间戳

首页 > 解决方案 > VueJs - 在重定向到页面之前获取数据

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

问题描述

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

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

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

附言。我router-link用来导航到另一个页面

标签： javascripthtmlcsstypescriptvue.js

解决方案

要回答您的确切问题，您可以查看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的方式在模板和现有函数中处理它。

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

推荐阅读