好吧，我终于想通了。我正在做的是在
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 v-bind:> <div > <h1 >{{ acf.home_title }}</h1> <h2 >{{ acf.home_subtitle }}</h2> <div > <a href="#/about"><button >{{ acf.link_title_1 }}</button></a> <a href="#/tickets"><button >{{ acf.link_title_2 }}</button></a> </div> </div> </div> </transition></template>要带走的最重要的信息是，与每次使用诸如之类的路径访问相比，所有ACF数据仅在开始时才被称为onCE
beforeRouteEnter (to, from,next)。结果，我能够根据需要获得柔滑的页面过渡。
希望这对遇到相同问题的人有所帮助。
