vue-router - 数据获取方式

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

• 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据
• 导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。

导航完成后获取数据

当使用这种方式时， 会马上导航和渲染组件，然后在组件的 created 钩子中获取数据

export default {
	// ....
  created() {
    this.$watch(
      () => this.$route.params,
      () => {
        this.fetchData()
      },
      // 在路由跳转完成后，立即拉取一遍数据，用于初始渲染
      { immediate: true }
    )
  },
  methods: {
    fetchData() {
      this.loading = true
     
      // 数据加载
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        // ....
      })
    },
  },
}

在导航完成前获取数据

通过这种方式，我们在导航转入新的路由前获取数据

export default {
  data() {
    return {
      post: null,
      error: null,
    }
  },
  async beforeRouteEnter(to, from, next) {
    // 这个是初始渲染
    cost post = await getPost(to.params.id)
    next(vm => vm.setData(err, post))
  },
  
  // 路由改变，组件复用时，重新拉取数据
  async beforeRouteUpdate(to, from) {
    this.post = null
    try {
      this.post = await getPost(to.params.id)
    } catch (error) {
      this.error = error.toString()
    }
  },
}