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

小编典典

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

ajax

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

该VUE路由器文档提供了深入了解在关于如何前和导航到各航线后加载数据，但我想知道如何加载在初始页面加载的所有路线和页面数据，绕过需要每个负载数据激活路线的时间。

请注意，我正在将数据加载到acf属性中，然后使用来在.vue文件组件中访问它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,
        } 
    },
}

有任何想法吗？

阅读 620

2020-07-26

共1个答案

小编典典

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

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数据仅在开始时才被称为ONCE beforeRouteEnter (to, from, next)。结果，我能够根据需要获得柔滑的页面过渡。

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

2020-07-26