如何在初始 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 调用时，数据会加载，但仅在页面已呈现之后.
vue-router 文档 提供了有关如何在导航到每个路由之前和之后加载数据，但我想知道如何在初始页面加载时加载所有路由和页面数据，从而避免每次激活路由时都需要加载数据.
注意，我将我的数据加载到 acf 属性中，然后使用 this.$parent.acfs 在 ..vue 文件组件中访问它
main.js 路由器代码:
const router = new VueRouter({路线: [{路径:'/'，组件:首页}，{路径:'/about'，组件:关于}，{ 路径:'/票'，组件:票}，{路径:'/赞助商'，组件:赞助商}，],哈希爆炸:假});export.router = 路由器；const app = new Vue({路由器，数据: {acfs: ''},创建(){$.ajax({url: 'http://localhost/placeholder/wp-json/acf/v2/page/2',类型:'获取'，成功:功能(响应){控制台日志(响应)；this.acfs = response.acf;//this.backgroundImage = response.acf.background_image.url}.绑定(这个)})}}).$mount('#app')Home.vue 组件代码:
出口默认{name: '关于',数据 () {返回 {acf: this.$parent.acfs,}},}有什么想法吗?
好吧，我终于想通了这个问题.我所做的只是在我的 main.js 文件中调用同步 ajax 请求，在该文件中我的根 vue 实例被实例化，并为请求的数据分配一个数据属性:
main.js
let acfData;$.ajax({异步:假，url: 'http://localhost/placeholder/wp-json/acf/v2/page/2',类型:'获取'，成功:功能(响应){控制台日志(响应.acf)；acfData = response.acf;}.绑定(这个)})const 路由器 = 新的 VueRouter({路线: [{路径:'/'，组件:首页}，{路径:'/about'，组件:关于}，{ 路径:'/票'，组件:票}，{路径:'/赞助商'，组件:赞助商}，],哈希爆炸:假});export.router = 路由器；const app = new Vue({路由器，数据: {acfs:acfData},创建(){}}).$mount('#app')从这里开始，我可以像这样使用每个 .vue 文件/组件中提取的数据:
出口默认{名称:'应用'，数据 () {返回 {acf: this.$parent.acfs,}},最后，我在同一个 .vue 模板中使用以下内容渲染数据:
<过渡名称=家"v-on:输入=输入"v-on:leave="离开"v-bind:css="false"模式=输入"><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>要带走的最重要的信息是，与每次使用诸如 beforeRouteEnter (to, from,下一个).因此，我能够根据需要获得如丝般流畅的页面过渡.
希望这对遇到同样问题的人有所帮助.
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.
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.
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 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,
}
},
}
Any ideas?
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')
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,
}
},
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>
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屋！
