Vue2 VueRouter 数据获取的 2 种方式

Question

1. 导航完成之后获取（常用)

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

在组件的 created 钩子中获取数据

<template>
    <div class="post">
        <div v-if="loading" class="loading">
                loading...
        </div>
        <div v-if="error" class="error">
             {{ error }}   
        </div>

        <div v-if="post" class="content">
            <h2>{{ post.title }} </h2>
            <p>{{ post.body }} </p>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                loading:false,
                post:null,
                error:null
            }
        },
        created(){
            //组件创建完后获取数据
            //此时 data 已经被 observed 了
            this.fetchData();
        },
        watch:{
            // 如果路由有变化，会再次执行该方法
            '$route':'fetchData'
        },
        methods:{
            fetchData(){
                this.error = this.post = null;
                this.loading = true;
                ...
            }
        }
    }
</script>

2. 导航完成之前获取

导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航

在组件的 beforeRouteEnter 守卫中获取数据，当数据获取成功后调用 next() 方法。

在为后面的视图获取数据时，会停留在当前的界面上，因此建议在数据获取量大时，显示一个进度条或者提示。若数据获取失败，还要展示一些全局错误提醒。

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