11、数据获取

介绍

学习vue-router的一些学习笔记，所有笔记内容请看

数据获取

在进入路由后，需要从服务器获取数据，有两种实现方式：
1、导航完成之后获取：先完成导航，然后在接下来的组件的生命周期钩子中获取数据。在获取数据期间显示’‘加载中’之类的指示。
2、导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，获取成功后执行导航

导航完成后获取数据：
该方式会马上导航和渲染组件，然后再created钩子中获取数据。期间可以展示一个 loading状态。
如下所示，post组件，需要基于$route.params.id 获取文章数据：

<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>
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
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

导航前完成数据获取：
在导航转入新的路由前获取数据

需要结合上例一起
export default{
    data(){
        return{
            post:null,
            error:null
        }
    },
    // 路由改变前，获取组件数据
    beforeRouterEnter(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
      }
    }
    }
}