我正在使用Vue和Vue路由器 . 常见的问题是加载显示某种外部资源的组件时需要进行异步加载 .
假设我有一个简单的Vue组件，它显示从外部仓库加载的帖子的 Headers ：
<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 方法返回一个promise，当解析时返回插入到组件数据中的post对象 .
一切正常，一旦帖子加载，帖子 Headers 就显示在页面中，但控制台会发出警告：
[Vue警告]：评估表达式“post.title”时出错：TypeError：无法读取null的属性'title'
问题是Vue试图在设置帖子之前渲染模板 . 在解决 route.data() 方法之前，有没有办法阻止模板渲染（这是我认为 waitForData 的用途）？
我知道我可以使用 v-if 但是如果可能的话我想避免过多的DOM操作 .
1 回答
http://router.vuejs.org/en/pipeline/data.html
建议的方法是将依赖于加载数据的东西放在：