API调用后如何呈现数据？ （Vue.js）

Question

因此，以下模板将立即呈现，并且它不会等待API调用。

我发现的解决方案是使用v-if，以防止在数据存在之前渲染元素。

如果我必须用v-if包装元素，这似乎与DRY原理背道而驰。
是否有解决此问题的另一种方法？ 另一种编码方式？

 <template> <div id="app"> <div v-if="obj"> <h2>{{ obj[0].item }}</h2> </div> <div v-if="obj"> <h5>{{ obj[0].id }}</h5> </div> </div> </template> <script> export default { name: 'app', data() { return { obj: [] } }, mounted: function() { axios.get(URL) .then(response => this.obj = response }); } } </script> 

Answer 1

是的，如果您使用的是Vue路由器-https: //router.vuejs.org/en/advanced/data-fetching.html

因此，通过观察$route对象，可以在激活路由后立即获取数据

在这里检查我的类似答案在vue.js路由加载之前检查权限