blocks|key|453252|text|您可以使用航行警卫。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|453253|在特定组件上，它将如下所示：|453254|export+default+{
++++beforeRouteEnter+(to,+from,+next)+{
++++++++//+my+ajax+call
++++}
};|code-block|syntax|javascript|453255|还可以向所有组件添加导航保护：|453256|router.beforeEach((to,+from,+next)+=>+{
++++//+my+ajax+call
});|453257|需要记住的一点是，导航保护是异步的，所以在数据加载完成后，您需要调用next()回调。我的应用程序中的一个实际示例(其中保护函数驻留在一个单独的文件中)：|style|CODE|453258|export+default+function(to,+from,+next)+{
++++Promise.all([
++++++++IngredientTypes.init(),
++++++++Units.init(),
++++++++MashTypes.init()
++++]).then(()+=>+{
++++++++next();
++++});
};|453259|当然，在您的例子中，您需要在next()回调中调用success。|453260|entityMap|0|LINK|mutability|MUTABLE|url|https://router.vuejs.org/en/advanced/navigation-guards.html^0|5|4|0|0|0|0|0|0|Y|6|0|0|E|6|P|7|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|1B|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1C|8|@$A|1D|B|1E|Q|R]]|9|@]|C|$]]|$1|S|3|T|5|H|7|1F|8|@]|9|@]|C|$I|J]]|$1|U|3|V|5|6|7|1G|8|@$A|1H|B|1I|Q|R]|$A|1J|B|1K|Q|R]]|9|@]|C|$]]|$1|W|3|-4|5|6|7|1L|8|@]|9|@]|C|$]]]|X|$Y|$5|Z|10|11|C|$12|13]]]]

<p>You can use <a href="https://router.vuejs.org/en/advanced/navigation-guards.html" rel="noreferrer">navigation guards</a>.</p>

<p>On a specific component, it would look like this:</p>

<pre><code>export default {
    beforeRouteEnter (to, from, next) {
        // my ajax call
    }
};
</code></pre>

<p>You can also add a navigation guard to all components:</p>

<pre><code>router.beforeEach((to, from, next) =&gt; {
    // my ajax call
});
</code></pre>

<p>One thing to remember is that navigation guards are async, so you need to call the <code>next()</code> callback when the data loading is finished. A real example from my app (where the guard function resides in a separate file):</p>

<pre><code>export default function(to, from, next) {
    Promise.all([
        IngredientTypes.init(),
        Units.init(),
        MashTypes.init()
    ]).then(() =&gt; {
        next();
    });
};
</code></pre>

<p>In your case, you'd need to call <code>next()</code> in the <code>success</code> callback, of course.</p>


blocks|key|451022|text|在Vue路由器的文档中检查此部分|type|unstyled|depth|inlineStyleRanges|entityRanges|data|451023|https://router.vuejs.org/guide/advanced/data-fetching.html|offset|length|451024|因此，首先您必须编写从端点获取数据的方法，然后使用观察者监视路由。|451025|export+default+{
++++watch:+{
++++++++'$route':+'fetchItems'
++++},
++++methods:+{
++++++++fetchItems()+{
++++++++++//+fetch+logic
++++++++}
++++}
}|code-block|syntax|javascript|451026|由于您使用的是WP+Rest，所以请随时检查我在Github+https://github.com/bedakb/vuewp/blob/master/public/app/themes/vuewp/app/views/PostView.vue#L39上的回购。|451027|entityMap|0|LINK|mutability|MUTABLE|url|1|https://github.com/bedakb/vuewp/blob/master/public/app/themes/vuewp/app/views/PostView.vue#L39^0|0|0|1M|0|0|0|0|V|2M|1|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|O|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|C]]|V|$5|R|S|T|A|$U|W]]]]

<p>Check this section in docs of Vue Router</p>

<p><a href="https://router.vuejs.org/guide/advanced/data-fetching.html" rel="nofollow noreferrer">https://router.vuejs.org/guide/advanced/data-fetching.html</a></p>

<p>So first of you have to write method that would fetch data from your endpoint, and then use watcher to watch route.</p>

<pre><code>export default {
    watch: {
        '$route': 'fetchItems'
    },
    methods: {
        fetchItems() {
          // fetch logic
        }
    }
}
</code></pre>

<p>Since you are working with WP Rest API, feel free to check my repo on Github <a href="https://github.com/bedakb/vuewp/blob/master/public/app/themes/vuewp/app/views/PostView.vue#L39" rel="nofollow noreferrer">https://github.com/bedakb/vuewp/blob/master/public/app/themes/vuewp/app/views/PostView.vue#L39</a></p>


blocks|key|1575372|text|好吧，我终于弄明白了。我所做的就是在我的main.js文件中调用一个同步ajax请求，其中实例化我的根vue实例，并为请求的数据分配数据属性，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1575373|main.js|BOLD|1575374|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')|code-block|syntax|javascript|1575375|从这里开始，我可以使用每个单独的.vue文件/组件中的数据，如下所示：|1575376|export+default+{
++++name:+'app',
++++data+()+{
++++return+{
++++++++acf:+this.$parent.acfs,
++++}
},|1575377|最后，我在相同的.vue模板中呈现数据，如下所示：|1575378|<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('+%2B+this.acf.home_background_image.url+%2B+')'}">
++++++<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>|1575379|需要删除的最重要的信息是，所有ACF数据一开始只被调用一次，与每次使用beforeRouteEnter+(to,+from,+next)之类的方式访问路由时相比。因此，我能够得到丝质平滑的页面转换，如所需。|1575380|希望这对遇到同样问题的人有帮助。|1575381|entityMap^0|K|7|0|0|7|0|0|G|4|0|0|8|4|0|0|Z|X|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|17|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|1B|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|T|3|U|5|K|7|1F|8|@]|D|@]|E|$L|M]]|$1|V|3|W|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|X|3|Y|5|6|7|1J|8|@]|D|@]|E|$]]|$1|Z|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|10|$]]

<p>Alright, I finally figured this thing out. All I'm doing is calling a synchronous ajax request within my <code>main.js</code> file where my root vue instance is instantiated, and assigning a data property the requested data as so:</p>

<p><strong>main.js</strong></p>

<pre><code>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')
</code></pre>

<p>From here, I can use the pulled data within each individual <code>.vue</code> file / component like so:</p>

<pre><code>export default {
    name: 'app',
    data () {
    return {
        acf: this.$parent.acfs,
    }
},
</code></pre>

<p>Finally, I render the data within the same <code>.vue</code> template with the following:</p>

<pre><code>&lt;template&gt;
  &lt;transition
      name="home"
      v-on:enter="enter"
      v-on:leave="leave"
      v-bind:css="false"
      mode="out-in"
    &gt;
    &lt;div class="full-height-container background-image home" v-bind:style="{backgroundImage: 'url(' + this.acf.home_background_image.url + ')'}"&gt;
      &lt;div class="content-container"&gt;
        &lt;h1 class="white bold home-title"&gt;{{ acf.home_title }}&lt;/h1&gt;
        &lt;h2 class="white home-subtitle"&gt;{{ acf.home_subtitle }}&lt;/h2&gt;
        &lt;div class="button-block"&gt;
          &lt;a href="#/about"&gt;&lt;button class="white home-button-1"&gt;{{ acf.link_title_1 }}&lt;/button&gt;&lt;/a&gt;
          &lt;a href="#/tickets"&gt;&lt;button class="white home-button-2"&gt;{{ acf.link_title_2 }}&lt;/button&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/transition&gt;
&lt;/template&gt;
</code></pre>

<p>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 <code>beforeRouteEnter (to, from, next)</code>. As a result, I'm able to get silky smooth page transitions as desired.</p>

<p>Hope this helps whoever comes across the same problem.</p>


blocks|key|1377970|text|我的方法是延迟构建存储和主Vue，直到AJAX调用返回为止。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1377971|store.js|1377972|import+Vue+from+'vue';
import+Vuex+from+'vuex';
import+actions+from+'./actions';
import+getters+from+'./getters';
import+mutations+from+'./mutations';

Vue.use(Vuex);

function+builder(data)+{
++return+new+Vuex.Store({
++++state:+{
++++++exams:+data,
++++},
++++actions,
++++getters,
++++mutations,
++});
}

export+default+builder;|code-block|syntax|javascript|1377973|main.js|1377974|import+Vue+from+'vue';
import+VueResource+from+'vue-resource';
import+App+from+'./App';
import+router+from+'./router';
import+store+from+'./store';

Vue.config.productionTip+=+false;

Vue.use(VueResource);

Vue.http.options.root+=+'https://miguelmartinez.com/api/';

Vue.http.get('data')
++.then(response+=>+response.json())
++.then((data)+=>+{
++++/*+eslint-disable+no-new+*/
++++new+Vue({
++++++el:+'#app',
++++++router,
++++++store:+store(data),
++++++template:+'<App/>',
++++++components:+{+App+},
++++});
++});|1377975|我在其他框架(如)中使用了这种方法。|1377976|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>My approach is to delay construction of the store and main Vue until my AJAX call has returned.</p>

<p>store.js</p>

<pre><code>import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions';
import getters from './getters';
import mutations from './mutations';

Vue.use(Vuex);

function builder(data) {
  return new Vuex.Store({
    state: {
      exams: data,
    },
    actions,
    getters,
    mutations,
  });
}

export default builder;
</code></pre>

<p>main.js</p>

<pre><code>import Vue from 'vue';
import VueResource from 'vue-resource';
import App from './App';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

Vue.use(VueResource);

Vue.http.options.root = 'https://miguelmartinez.com/api/';

Vue.http.get('data')
  .then(response =&gt; response.json())
  .then((data) =&gt; {
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store: store(data),
      template: '&lt;App/&gt;',
      components: { App },
    });
  });
</code></pre>

<p>I have used this approach with other frameworks such as Angular and ExtJS.</p>


blocks|key|451066|text|我已经根据对这篇文章的所有伟大的回应组成了我自己的版本。几年过去了，也给了我更多的工具。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|451067|在main.js中，我使用异步/等待调用预取服务来加载启动时必须存在的任何数据。我发现这增加了可读性。在获得数据通信之后，然后将其分配给beforeCreate()钩子中适当的vuex存储模块。|offset|length|style|BOLD|451068|import+Vue+from+'vue';
import+App+from+'./App.vue';
import+router+from+'./router';
import+store+from+'./store';

import+{+prefetchAppData+}+from+'@/services/prefetch.service';

(async+()+=>+{
++++let+comms+=+await+prefetchAppData();

++++new+Vue({
++++++++router,
++++++++store,
++++++++beforeCreate()+{
++++++++++++store.dispatch('communityModule/initialize',+comms);
++++++++},
++++++++mounted()+{},
++++++++render:+h+=>+h(App)
++++}).$mount('#app');
})();|code-block|syntax|javascript|451069|我不得不警告那些人要小心你预先取到的东西。尽量做到这一点，因为它确实延迟了最初的应用程序加载，这是不理想的一个良好的用户体验。|451070|这是我的示例prefetch.service.js，它加载数据。当然，这可能会更复杂。|451071|import+api+from+'@api/community.api';
export+async+function+prefetchAppData()+{
++++return+await+api.getCommunities();
}|451072|一个简单的vue商店。该商店维护应用程序启动前需要加载的“社区”列表。|451073|community.store.js+(注意im使用vuex模块)|451074|export+const+communityModule+=+{
++++namespaced:+true,
++++state:+{
++++++++communities:+[]
++++},
++++getters:+{
++++++++communities(state)+{
++++++++++++return+state.communities;
++++++++},
++++},
++++mutations:+{
++++++++SET_COMMUNITIES(state,+communities)+{
++++++++++++state.communities+=+communities;
++++++++}
++++},
++++actions:+{
++++++++//+instead+of+loading+data+here,+it+is+passed+in+
++++++++initialize({+commit+},+comms)+{
++++++++++++commit('SET_COMMUNITIES',+comms);
++++++++}
++++}
};|451075|entityMap^0|0|1|7|1K|2|0|0|0|6|J|0|0|0|0|I|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]|$D|14|E|15|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|18|8|@$D|19|E|1A|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|J|7|1B|8|@]|9|@]|A|$K|L]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1D|8|@$D|1E|E|1F|F|G]]|9|@]|A|$]]|$1|W|3|X|5|J|7|1G|8|@]|9|@]|A|$K|L]]|$1|Y|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|Z|$]]

<p>I've comprised my own version based on all the great responses to this post.. and several years having passed by as well giving me more tools.</p>

<p>In <strong>main.js</strong>, I use async/await to call a prefetch service to load any data that must be there on startup. I find this increases readability. After I get the data <strong>comms</strong>, I then dispatch it to the appropriate vuex store module in the beforeCreate() hook.</p>

<pre><code>import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

import { prefetchAppData } from '@/services/prefetch.service';

(async () =&gt; {
    let comms = await prefetchAppData();

    new Vue({
        router,
        store,
        beforeCreate() {
            store.dispatch('communityModule/initialize', comms);
        },
        mounted() {},
        render: h =&gt; h(App)
    }).$mount('#app');
})();
</code></pre>

<p><em>I feel compelled to warn those be careful what you prefetch. Try to do this sparingly as it does delay initial app loading which is not ideal for a good user experience.</em></p>

<p>Here's my sample <strong>prefetch.service.js</strong> which does the data load. This of course could be more sophisticated.</p>

<pre><code>import api from '@api/community.api';
export async function prefetchAppData() {
    return await api.getCommunities();
}
</code></pre>

<p>A simple vue store. This store maintains a list of 'communities' that the app requires to be loaded before application start.</p>

<p><strong>community.store.js</strong> (note im using vuex modules)</p>

<pre><code>export const communityModule = {
    namespaced: true,
    state: {
        communities: []
    },
    getters: {
        communities(state) {
            return state.communities;
        },
    },
    mutations: {
        SET_COMMUNITIES(state, communities) {
            state.communities = communities;
        }
    },
    actions: {
        // instead of loading data here, it is passed in 
        initialize({ commit }, comms) {
            commit('SET_COMMUNITIES', comms);
        }
    }
};
</code></pre>


<p>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. </p>

<p>The <a href="https://router.vuejs.org/en/advanced/data-fetching.html" rel="noreferrer">vue-router documentation</a> 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.</p>

<p>Note, I'm loading my data into the <code>acf</code> property, and then accessing it within a <code>.vue</code> file component using <code>this.$parent.acfs</code>.</p>

<p><strong>main.js Router Code:</strong></p>

<pre><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')
</code></pre>

<p><strong>Home.vue Component Code:</strong></p>

<pre><code>export default {
    name: 'about',
    data () {
        return {
            acf: this.$parent.acfs,
        } 
    },
}
</code></pre>

<p>Any ideas?</p>


How to load all server side data on initial vue.js / vue-router load?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我目前正在使用WordPress REST和vue路由器来在一个小页面站点上的页面之间进行转换。但是，当我使用REST对服务器进行AJAX调用时，数据会加载，但只在页面已经呈现之后。提供了关于如何在导航到每个路由之前和之后加载数据的深入了解，但我想知道如何在初始页面加载时加载所有路由和页面数据，避免每次路由被激活时都需...

问如何在初始的vue.js /vue路由器负载上加载所有服务器端数据？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在初始的vue.js /vue路由器负载上加载所有服务器端数据？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在初始的vue.js /vue路由器负载上加载所有服务器端数据？
EN