Как работать с async / await в vue-router?

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'),
},