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

Posted 2023-02-22

【中文标题】VueJs - 在重定向到页面之前获取数据

【英文标题】：VueJs - fetch data before redirect to page

【发布时间】：2021-05-17 17:46:00

【问题描述】：

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

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

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

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

【问题讨论】：

你试过在挂载的钩子中使用 async 和 await 吗？

@YashMaheshwari 不，你能举个例子吗？

【参考方案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 函数中处理它，就像你所做的那样。

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

【参考方案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;
      
    );)

【讨论】：

这在我的项目中不起作用：/我认为我需要使用 beforeMount of something else

您可以尝试以下三种方法之一：beforeCreate、created 或 asyncData 代替挂载的挂钩