vue 获取数据

1。导航完成后获取数据

<template>
  <div>
    <div v-if="loading"> Loading ... </div>
    type
  </div>
</template>

<script>
export default {
  name: 'Type',
  props: {
      msg: String
  },
  created(){
    this.fetchData();
  },
  watch: {
    '$route': 'fetchData'
  },
  data(){
    return {
      loading: false
    }
  },
  methods: {
      fetchData(){
         var self = this;
         this.loading = true;
         console.log("已经进入组件了");
        
         setTimeout(function(){
            self.loading = false;
         },300);
      }
  }
}

　这个里面watch的监听，对导航，? & query带的参数都会重新去调用这个fetchDate。所以，如果局部数据并不想被路由影响，就不要加这个。出去这句，其他的和一般获取数据，加loading没有什么区别。

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

　　获取到数据之前，用户会停留在上一页。我打印了一下，感觉beforeRouteUpdate执行的时间并不比里面的调用提前多少，提前是提前的。