Vue JS 在路由/挂载组件之前获取 AJAX 数据

Question

我想在 VueJS 进行任何路由/挂载之前初始化一些基础数据。

现在我发现了 Global Navigation Guard router.beforeEach。但它不仅会在初始加载（页面加载）上触发，还会在触发的每个路由上触发。现在我可以输入某种if-statement 让代码只运行一次，但这不是我解决这个问题的首选方式：

// pseudo:
router.beforeEach((to, from, next) => {
    if (state.initialized === false) {
        await store.dispatch(init)
    }

    // the rest of my routing guard logic....
})

我不希望每次都运行 if 语句（知道它只会为真一次，之后永远为假）。

是否有官方方法让 (ajax) 代码只运行一次，在 vue 初始化之后（所以我可以访问 vuex 状态等），在任何路由开始之前。 p>

Answer 1

您可以在挂载根 Vue 实例之前轻松地执行异步任务。

例如

// main.js
import Vue from 'vue'
import store from 'path/to/your/store'
import router from 'path/to/your/router'
import App from './App.vue'

store.dispatch('init').then(() => {
  new Vue({
    store,
    router,
    render: h => h(App)
  }).$mount('#app')
})

在加载时在index.html 中显示一些内容是个好主意，例如

<div id="app">
  <!-- just an example, this will be replaced when Vue mounts -->
  <p>Loading...</p>
</div>