十、Vue Router 進階-獲取數據

獲取數據的兩種方式

• 導航完成之后獲取數據：先完成導航，然后在接下來的組件生命周期鈎子created中獲取數據。在數據獲取期間展示一個loading加載中的狀態提示。

• 導航完成之前獲取：導航完成前，在路由進入的守衛中獲取數據，在數據獲取成功后執行導航。

導航完成之后獲取數據(可展示loading)

在組件的created鈎子中獲取數據。在獲取數據期間展示一個loading狀態，可以在不同視圖間展示不同的loading狀態。

<template>
	<div class="post">
    	<div class="loading" v-if="loading">Loading...</div>
    	<div class="error" v-if="error">{{ error }}</div>
    	<div class="content" v-if="post">
        	<h2>{{ post.title }}</h2>   
        	<p>{{ post.body }}</p>   
    	</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            post: null,
            error：null
        }
    },
    created () {
        // 組件創建完成后獲取數據
        this.fetchData();
    },
    watch: {
        // 路由發生變化，會再次執行該方法
        "$route": 'fetchData'
    },
    methods: {
        fetchData () {
            this.error = this.post = null;
            this.loading = true
            // 發送請求 - 獲取動態數據
            getPost(this.$route.params.id, (err, post) => {
            	this.loading = false;
                if(err){
                    this.error = err.toString();
                }else{
                    this.post = post;
                }
            });
        }
    }
}
</script>

在導航前獲取數據(不能添加loading提示)

在導航轉入新的路由前獲取數據，可以在組件的beforeRouteEnter守衛中獲取數據，當數據獲取成功之后調用next方法進入頁面。當頁面導航變化時，在beforeRouteUpdate鈎子函數獲取數據。

<script>
export default {
    data() {
        return {
            post: null,
            error: null
        }
    },
    beforeRouteEnter (to, from, next) {
        // 在確定進入路由之前獲取數據，當數據獲取成功則確定進入路由
        getPost(to.params.id, (err, post) => {
        	next(vm => vm.setData(err, post)); 
        });
    },
    // 路由更新時重新獲取數據
    beforeRouteUpdate（to, from, next) {
    	this.post = null;
    	getPost(to.params.id, (err, post) => {
        	this.setData(err, post);
        	next();
    	});
	},
    methods: {
        setData (err, post) {
            if(err) {
                this.error = err.toString();
            }else{
                this.post = post;
            }
        }        
    }
}
</script>