十Vue Router 进阶-获取数据

Posted 2020-11-26 yuxi2018

获取数据的两种方式

• 导航完成之后获取数据：先完成导航，然后在接下来的组件生命周期钩子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>