如何在初始vue.js / vue-router加载时加载所有服务器端数据？ [英] How to load all server side data on initial vue.js / vue-router load?

问题描述

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

I'm currently making use of the WordPress REST API, and vue-router to transition between pages on a small single page site. However, when I make an AJAX call to the server using the REST API, the data loads, but only after the page has already rendered.

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

The vue-router documentation provides insight in regards to how to load data before and after navigating to each route, but I'd like to know how to load all route and page data on the initial page load, circumventing the need to load data each time a route is activated.

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

Note, I'm loading my data into the acf property, and then accessing it within a .vue file component using this.$parent.acfs.

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

有任何想法吗？

推荐答案

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

Alright, I finally figured this thing out. All I'm doing is calling a synchronous ajax request within my main.js file where my root vue instance is instantiated, and assigning a data property the requested data as so:

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 文件/组件中使用提取的数据，如下所示：

From here, I can use the pulled data within each individual .vue file / component like so:

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

最后，我在同一 .vue 模板，其中包含以下内容：

Finally, I render the data within the same .vue template with the following:

<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（到，从，下一个）之类的路径访问相比。结果，我能够按需获得平滑的页面过渡。

The most important piece of information to take away, is that all of the ACF data is only being called ONCE at the very beginning, compared to every time a route is visited using something like beforeRouteEnter (to, from, next). As a result, I'm able to get silky smooth page transitions as desired.

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

Hope this helps whoever comes across the same problem.

这篇关于如何在初始vue.js / vue-router加载时加载所有服务器端数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！