且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-12-05 17:33:16

好吧,我终于想通了这个问题.我所做的只是在我的 main.js 文件中调用同步 ajax 请求,在该文件中我的根 vue 实例被实例化,并为请求的数据分配一个数据属性:

ma​​in.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 模板中使用以下内容渲染数据: