如何在初始 vue.js / vue-router 加载时加载所有服务器端数据？

Question

我目前正在使用 WordPress REST API 和 vue-router 在小型单页网站上的页面之间进行转换。但是，当我使用 REST API 对服务器进行 AJAX 调用时，数据会加载，但只有在页面已经呈现之后才会加载。

vue-router 文档 提供了有关如何在导航到每个路由之前和之后加载数据的见解，但我想知道如何在初始页面加载时加载所有路由和页面数据，从而避免每次加载数据的需要路由被激活的时间。

请注意，我正在将数据加载到 acf 属性中，然后使用 this.$parent.acfs 在 .vue 文件组件中访问它。

main.js 路由器代码：

 const router = new VueRouter({
    routes: [
        { path: '/', component: Home },
        { path: '/about', component: About },
        { path: '/tickets', component: Tickets },
        { path: '/sponsors', component: Sponsors },
    ],
    hashbang: false
});

exports.router = router;

const app = new Vue({
    router,
    data: {
        acfs: ''
    },
    created() {
        $.ajax({
            url: 'http://localhost/placeholder/wp-json/acf/v2/page/2',
            type: 'GET',
            success: function(response) {
                console.log(response);
                this.acfs = response.acf;
                // this.backgroundImage = response.acf.background_image.url
            }.bind(this)
        })
    }
}).$mount('#app')

Home.vue 组件代码：

 export default {
    name: 'about',
    data () {
        return {
            acf: this.$parent.acfs,
        }
    },
}

有任何想法吗？

原文由 10000RubyPools 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好吧，我终于想通了。我所做的只是在我的 main.js 文件中调用同步 ajax 请求，在该文件中实例化了我的根 vue 实例，并为请求的数据分配数据属性，如下所示：

main.js

 let acfData;

$.ajax({
    async: false,
    url: 'http://localhost/placeholder/wp-json/acf/v2/page/2',
    type: 'GET',
    success: function(response) {
        console.log(response.acf);
        acfData = response.acf;
    }.bind(this)
})

const router = new VueRouter({
    routes: [
        { path: '/', component: Home },
        { path: '/about', component: About },
        { path: '/tickets', component: Tickets },
        { path: '/sponsors', component: Sponsors },
    ],
    hashbang: false
});

exports.router = router;

const app = new Vue({
    router,
    data: {
        acfs: acfData
    },
    created() {

    }
}).$mount('#app')

从这里，我可以在每个人 .vue 文件/组件中使用提取的数据，如下所示：

 export default {
    name: 'app',
    data () {
    return {
        acf: this.$parent.acfs,
    }
},

最后，我在同一个 .vue 模板中渲染数据，其内容如下：

 <template>
  <transition
      name="home"
      v-on:enter="enter"
      v-on:leave="leave"
      v-bind:css="false"
      mode="out-in"
    >
    <div class="full-height-container background-image home" v-bind:style="{backgroundImage: 'url(' + this.acf.home_background_image.url + ')'}">
      <div class="content-container">
        <h1 class="white bold home-title">{{ acf.home_title }}</h1>
        <h2 class="white home-subtitle">{{ acf.home_subtitle }}</h2>
        <div class="button-block">
          <a href="#/about"><button class="white home-button-1">{{ acf.link_title_1 }}</button></a>
          <a href="#/tickets"><button class="white home-button-2">{{ acf.link_title_2 }}</button></a>
        </div>
      </div>
    </div>
  </transition>
</template>

最重要的一条信息是，所有的 ACF 数据在一开始只被调用一次，而每次使用类似 beforeRouteEnter (to, from, next) 的方式访问一条路线时。结果，我能够根据需要获得如丝般平滑的页面转换。

希望这对遇到同样问题的人有所帮助。

原文由 10000RubyPools 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我的方法是延迟商店和主 Vue 的构建，直到我的 AJAX 调用返回。

store.js

 import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions';
import getters from './getters';
import mutations from './mutations';

Vue.use(Vuex);

function builder(data) {
  return new Vuex.Store({
    state: {
      exams: data,
    },
    actions,
    getters,
    mutations,
  });
}

export default builder;

main.js

 import Vue from 'vue';
import VueResource from 'vue-resource';
import App from './App';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

Vue.use(VueResource);

Vue.http.options.root = 'https://miguelmartinez.com/api/';

Vue.http.get('data')
  .then(response => response.json())
  .then((data) => {
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store: store(data),
      template: '<App/>',
      components: { App },
    });
  });

我已经将这种方法用于其他框架，例如 Angular 和 ExtJS。

原文由 Miguel 发布，翻译遵循 CC BY-SA 3.0 许可协议