如何在加载某些异步数据(在Vuex存储中)之前阻止任何路由?

解决方案很简单。增加一个 init 或同等Vuex action 去你商店的相关部分。
它应该返回 Promise 在您的应用程序 绝对需要 ^* :

init ({ dispatch }) {       // Could also be async and use await instead of return
  return Promise.all([
    dispatch('getUserSession'), // Using another action
    dispatch('auth/init'),      // In another module
    fetch('tehKittenz')         // With the native fetch API
    // ...
  ])
}

上面的代码可以使用返回 许诺 .

然后创建一个 global navigation guard 在路由器中使用 beforeEach .
这个守卫将等待 dispatch 去商店。

// In your router initialization code
const storeInit = store.dispatch('init')

// Before all other beforeEach
router.beforeEach((to, from, next) => {
  storeInit.then(next)
    .catch(e => {
      // Handle error
    })
})

这样,如果路由发生在存储完全加载之前,那么路由器只需等待。
如果路由发生在之后,则承诺将已经位于 fulfilled 状态和路由将继续。

别忘了用 conditional rendering 以便在路由等待数据时不显示空白屏幕。

^* :这将阻止所有路由和导航,只要正在获取数据。小心。