有時進入路由之後需要從伺服器獲取資料。例如在渲染使用者資訊時，需要從伺服器獲取使用者資料。

我們可以有兩種方法來實現：

一種是導航完成之後獲取，一種是導航之前獲取。
先完成導航的，需要在接下來的元件生命週期鉤子中獲取資料，在資料獲取期間顯示【載入中】之類的提示。
導航完成之前獲取資料的，在路由進入的守衛獲取資料，資料獲取完了再完成導航。

導航完成後獲取資料

在元件的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
   }
  }
 }
}