vue-数据获取的2中方式

数据获取

数据获取有2中方式

导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。

导航完成之前获取：导航完成前，在路由的 enter 钩子中获取数据，在数据获取成功后执行导航。

下面我们做一个效果演示一下这个数据获取

首先我们要下载有个vue-resource.js的文件，然后我们在创建一个data.json的文件，我们将数据存在这个文件中，然后通过地址获取

重要提示，我们在做的时候要把data.json的地址写对了

效果

 <div id="app">
    <router-link to="/">首页</router-link>
    <router-view></router-view>
</div>
<script>
    var url="http://192.168.0.103:8000/data.json";
    var router = new VueRouter({
        routes:[
            {
                path:"/",
                component:{
                    data:function(){
                        return {
                            xinxi:[]
                        }
                    },
                    template:`
                            <ul>
                                <li v-for="(xin , i) in xinxi">{{xin.name}}{{xin.age}}{{xin.sex}}</li>
                            </ul>
                        `,
                    mounted:function(){
                        this.$http.get(url).then(response => {
                            this.xinxi = response.body;

                        }, response => {

                        });
                    }
                }
            }
        ]
    });
    var vm = new Vue({
        el:"#app",
        router
    });
</script>

导航完成之后获取（组件生命周期钩子）

我们做一个导航直接显示，列表3秒后显示

我们需要将data对象写在组件中

效果

<div id="app">
    <router-link to="/">首页</router-link>
    <router-view></router-view>
</div>
<script>
    var url="http://192.168.0.103:8000/data.json";
    var router = new VueRouter({
        routes:[
            {
                path:"/",
                component:{
                    data:function(){
                        return {
                            xinxi:[],
                            no:true
                        }
                    },
                    template:`
                        <div>
                            <h2>个人信息</h2>
                            <span v-show = 'no'>加载中.........</span>
                            <ul>
                                <li v-for="(xin , i) in xinxi">{{xin.name}}{{xin.age}}{{xin.sex}}</li>
                            </ul>
                        </div>
                        `,
                    mounted:function(){
                        var t = this;
                        setTimeout(function(){
                            t.$http.get(url).then(response => {
                                t.no = false
                                t.xinxi = response.body;

                            }, response => {

                            });
                        },3000)
                        
                    }
                }
            }
        ]
    });
    var vm = new Vue({
        el:"#app",
        router
    });
</script>

导航完成之前获取(用路由的 enter 钩子)

我们做了一个导航完成前列表渲染

我们需要将data对象写在根实例中

效果8

<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/foo">关于我们</router-link>
    <router-view></router-view>
</div>
<script>
    var url="http://192.168.0.103:8000/data.json";
    var router = new VueRouter({
        routes:[
            {
                path:"/",
                component:{
                    data:function(){
                        return {
                            xinxi:vm.xinxi,
                            no:vm.no
                        }
                    },
                    template:`
                        <div>
                            <h2>个人信息</h2>
                            <span v-show = 'no'>加载中.........</span>
                            <ul>
                                <li v-for="(xin , i) in xinxi">{{xin.name}}{{xin.age}}{{xin.sex}}</li>
                            </ul>
                        </div>
                        `,
                    beforeRouteEnter (to, from, next) {
                        setTimeout(function(){
                            Vue.http.get(url).then(response => {
                                vm.no = false
                                vm.xinxi = response.body;
                                next();
                            }, response => {
                                next("/")
                            });
                        },2000)
                    },
                }
            },
            {
                path:"/foo",
                component:{
                    template:`
                        <div>
                            <h2>关于我们</h2>
                        </div>
                        `
                }
            }
        ]
    });
    var vm = new Vue({
        el:"#app",
        router,
        data:{
            xinxi:[],
            no:true
        }
       
    });
</script>

下面是代码预览地址

https://github.com/Besmall/vu...

(index.html是导航完成之前获取)

(index1.html是导航完成之后获取)