在我的应用程序中，我需要在路由开始之前在VueX存储中加载一些数据(例如用户会话).
竞赛条件的一个例子如下:
// In routes definition
{
name: 'login',
path: '/login',
component: Login,
meta: {
goToIndexIf: () => store.getters['auth/loggedIn']
}
}
在这种情况下，可能会在从服务器接收到用户之前执行路由保护.
使用条件渲染没有帮助，因为在渲染模板中执行路由保护时，无论是否使用<router-view v-if="storeReady">.
如何让所有路由等待一些异步数据？
解决办法很简单.将init或等效Vuex action添加到store 的相关部分
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
// ...
])
}
上面的代码可以使用任何返回Promise的代码.
然后用beforeEach在路由上创建一个global navigation guard
// 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
})
})
这样，如果在存储完全加载之前进行路由，路由只需等待
不要忘记使用conditional rendering之类的东西，以免在路由等待数据时显示空白屏幕.
*:这将阻止所有路由和导航，只要数据正在获取.小心.