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