VueRouter进阶三(数据获取)

数据获取

工具

我们可以使用 ajax 等工具.

我们这里使用了vue-resource

地址:
https://github.com/pagekit/vu...

导航完成后获取数据

当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 mounted 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。

component:{
    data:function(){
        return {
            shuju:[]
        }
    },
    template:`
            <ul>
                <li v-for="(shujuy , i) in shuju" :key="i">{{shujuy.name}}</li>
            </ul>
        `,
    mounted:function(){
        this.$http.get(url).then(response => {
            this.shuju = response.body;
        }, response => {

        });
    }
}

在导航完成前获取数据

通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 钩子中获取数据，当数据获取成功后只调用 next 方法。

beforeRouteEnter (to, from, next) {
    Vue.http.get(url).then(response => {
    vm.no = false
    vm.shuju = response.body;
    next();
    }, response => {
    next("/")
}},

详细资料:https://github.com/Smallmotor...