Question

在vue路由器beforeEach中，我有代码：

function foo() {
    return new Promise(resolve => {
        //load data from http request 
        resolve() 
    }) 
}

router.beforeEach(async (to, from, next) => { 
    await foo()
    next()
}

问题仅在于当我刷新页面或第一次输入时，beforeach两次调用，我不知道为什么吗？我该如何忽略这种行为？我想在用户进入页面之前等待来自API的一些数据。

如果beforeEach中没有异步等待，它将按预期工作。

Answer 1

使路由器异步等待是非常糟糕的做法，请在VueX store（状态管理）上使用异步等待，而不要在路由器上等待数据。

或者，如果您希望页面延迟加载（即仅在需要时加载），则可以执行此操作-

{
  path: '/subjects',
  name: 'subjectlist',
  component: () =>
    import(/* webpackChunkName: "subjectList" */
    '@/views/SubjectListPage.vue'),
},

如何在vue-router中使用异步/等待？

1 个答案: