数据获取

有时，进入某个路由之后，需要从服务器获取数据，可以通过两种方式实现：

1，导航完成之后获取

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

　　② 当使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据，这样我们有机会在数据获取期间展示一个 loading，还可以在不用视图间展示不同的 loading

　　③ 如，当导航到 /user/userA 组件时，UserA 组件需要获取用户数据

　　　　UserA.vue

<template>
  <div>
    <div class="box">UserA</div>
    <h3 v-if="loading">Loading.....</h3>
    <h3 v-if="error">{{error}}</h3>
    <h3 v-if="data">{{data[0].body}}</h3>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data: function() {
    return {
      loading: null,
      error: null,
      data: null
    };
  },
  created() {
    this.getData(); //组件创建完成后获取数据，此时data已经被 observed了 
  },
  watch: {
    $route: "getData" // 路由变化，再次获取数据
  },
  methods: {
    async getData() {
      this.loading = true;
      const res = await axios.get("http://jsonplaceholder.typicode.com/posts");
      this.loading = false;
      if (res.status === 200) this.data = res.data;
      else this.error = res.statusText;
    }
  }
};
</script>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}
</style>

2，导航完成之前获取

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

　　② 通过这种方式，在导航转入新的路由之前获取数据，在接下来的组件的 beforeRouteEnter 守卫中获取数据，当数据获取成功后调用 next 方法

　　③ 如，当导航到 /user/userB 组件时，UserB 组件需要获取数据

<template>
  <div>
    <div class="box">UserB</div>
    <div v-if="loading">Loading....</div>
    <div v-if="error">{{ error }}</div>
    <div v-if="data">{{ data[0].username }}</div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data: function() {
    return {
      loading: false,
      error: null,
      data: null
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getData(vm);
    });
  },
  // 不同于beforeRouteEnter，beforeRouteUpdate是路由改变之前，组件已经渲染完毕
  beforeRouteUpdate(to, from) {
    this.getData(this);
  },
  methods: {
    async getData(CurComponent) {
      CurComponent.loading = true;
      const res = await axios.get("http://jsonplaceholder.typicode.com/users");
      console.log(res)
      CurComponent.loading = false;
      if (res.status === 200) CurComponent.data = res.data;
      else CurComponent.error = res.statusText;
    }
  }
};
</script>
<style scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: pink;
}
</style>