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是導航完成以後獲取)