我目前正在使用WordPress REST API和vue路由在一个小型单页网站上的页面之间进行转换.然而,当我使用REST API对服务器进行AJAX调用时,数据会加载,但只有在页面已经呈现之后.
vue-router documentation提供了有关如何在导航到每个路由之前和之后加载数据的详细信息,但我想知道如何在初始页面加载时加载所有路由和页面数据,避免了每次激活路由时加载数据的需要.
注意,我正在将数据加载到acf
属性中,然后使用this.$parent.acfs
在.vue
文件组件中访问它.
main.js Router Code:
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 Component Code:
export default {
name: 'about',
data () {
return {
acf: this.$parent.acfs,
}
},
}
有什么 idea 吗?