延迟渲染 Vue 块，直到加载数据

Question

我正在使用 Vue 和 Vue 路由器。一个常见的问题是加载显示某种外部资源的组件时需要一些异步加载。

假设我有一个简单的 Vue 组件，它显示从外部存储库加载的帖子的标题：

<template>
  <div>
    {{ post.title }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      post: null
    }
  },

  route: {
    waitForData: true,
    data () {
      return postRepo.fetch(this.$route.params.id)
      .then(post => {
        return {post: post}
      })
      .catch(err => { console.warn(err) })
    }
  }
}
</script>

我的路由 data 方法返回一个承诺，当解决后返回插入到组件数据中的 post 对象。

这一切正常，一旦加载帖子，帖子标题就会显示在页面中，但控制台会抛出警告：

[Vue 警告]：评估表达式“post.title”时出错：TypeError: Cannot read property 'title' of null

问题是 Vue 试图在设置帖子之前渲染模板。在解决route.data() 方法之前，有没有办法阻止模板渲染（我认为waitForData 就是这样做的）？

我知道我可以使用v-if，但我想尽可能避免过多的 DOM 操作。

Answer 1

http://router.vuejs.org/en/pipeline/data.html

推荐的方法是将依赖于加载数据的东西放在一个：

<div v-if="!$loadingRouteData"></div>