数据获取

有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：

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

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

从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。

导航完成后获取数据

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

假设我们有一个 Post 组件，需要基于 $route.params.id 获取文章数据：

  1. <template>
  2.   <div class="post">
  3.     <div v-if="loading" class="loading">Loading...</div>
  5.     <div v-if="error" class="error">{{ error }}</div>
  7.     <div v-if="post" class="content">
  8.       <h2>{{ post.title }}</h2>
  9.       <p>{{ post.body }}</p>
  10.     </div>
  11.   </div>
  12. </template>
  1. export default {
  2.   data() {
  3.     return {
  4.       loading: false,
  5.       post: null,
  6.       error: null,
  7.     }
  8.   },
  9.   created() {
  10.     // watch 路由的参数，以便再次获取数据
  11.     this.$watch(
  12.       () => this.$route.params,
  13.       () => {
  14.         this.fetchData()
  15.       },
  16.       // 组件创建完后获取数据，
  17.       // 此时 data 已经被 observed 了
  18.       { immediate: true }
  19.     )
  20.   },
  21.   methods: {
  22.     fetchData() {
  23.       this.error = this.post = null
  24.       this.loading = true
  25.       // replace `getPost` with your data fetching util / API wrapper
  26.       // 用你的数据获取 util 或 API 替换 `getPost`
  27.       getPost(this.$route.params.id, (err, post) => {
  28.         this.loading = false
  29.         if (err) {
  30.           this.error = err.toString()
  31.         } else {
  32.           this.post = post
  33.         }
  34.       })
  35.     },
  36.   },
  37. }

在导航完成前获取数据

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

  1. export default {
  2.   data() {
  3.     return {
  4.       post: null,
  5.       error: null,
  6.     }
  7.   },
  8.   beforeRouteEnter(to, from, next) {
  9.     getPost(to.params.id, (err, post) => {
  10.       next(vm => vm.setData(err, post))
  11.     })
  12.   },
  13.   // 路由改变前，组件就已经渲染完了
  14.   // 逻辑稍稍不同
  15.   async beforeRouteUpdate(to, from) {
  16.     this.post = null
  17.     try {
  18.       this.post = await getPost(to.params.id)
  19.     } catch (error) {
  20.       this.error = error.toString()
  21.     }
  22.   },
  23. }

在为后面的视图获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示。如果数据获取失败，同样有必要展示一些全局的错误提醒。