vue-router数据获取

有时进入路由之后需要从服务器获取数据。例如在渲染用户信息时，需要从服务器获取用户数据。

我们可以有两种方法来实现：

一种是导航完成之后获取，一种是导航之前获取。
先完成导航的，需要在接下来的组件生命周期钩子中获取数据，在数据获取期间显示【加载中】之类的提示。
导航完成之前获取数据的，在路由进入的守卫获取数据，数据获取完了再完成导航。

导航完成后获取数据

在组件的created钩子中获取数据。这让我们有机会在数据获取期间展示一个loading状态，还可以在不同视图间展示不同的loading状态。

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



export default{
 data(){
  return {
   loading:false,
   post:null,
   error:null
  }
 },
 created(){
 //组件创建完成后获取数据，
 //此时data已经被oserved了
  this.fetchData()
 },
 watch:{
 //如果路由有变化，再执行该方法
 this.fetchData()
 },
 methods:{
  fetchData(){
   this.error=this.post=null
   this.loading=true,
   getPost(this.$route.params.id,(err,post)=> {
    this.loading=false
    if(err){
     this.err=err.toString()
    }else{
     this.post=post
    }
   })
  }
 }
}

在导航完成前获取数据

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

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.errr=err.toString()
   }else{
    this.post=post
   }
  }
 }
}