vue想要先加载完所有数据再渲染页面

Question

我的项目使用vue，我的图片链接需要通过接口返回，不想要页面渲染出来图片再进行刷新。试过在create里面和routebeforenter里面发请求，但是貌似都没有用，有人提示我用懒加载，但是我记得懒加载是给一个占位图，这个并不是我想要的效果。我想要一个空白页面做过渡，等我的数据加载完之后空白页面消失，页面直接渲染出来就是所有的东西

Answer 1

v-if 数据出来在渲染

Answer 2

理论上是在created方法中请求接口是可以的，不知道你的代码是如何写的

Answer 3

routebeforenter 怎么就不行了? 你 next 写在哪？
实在不行 v-if 了解一下，等数据加载完了再渲染啊

Answer 4

vif判断~数据接收到了再渲染

Answer 5

同步加载数据，在最后一个请求成功之后再一一赋值即可。
ajax没法做同步，你需要引入promise，推荐使用官方推荐的axios

例如用axios请求数据：

data(){
  return{
    data1:'',data2:'',data3:''
  }
}

// methods：
var data1, data2, data3;
axios.get('/user?ID=12345')
 .then(function (res){
   data1 = res.data
 })
 .then(function (res){
   data2 = res.data
 })
 .then(function (res){
   // 最终请求成功
   data3 = res.data
   this.data1 = data1
   this.data2 = data2
   this.data3 = data3
 })
  .catch(function (error) {
    console.log(error);
  });

Answer 6

beforeRouteEnter肯定能实现你的需求的，而且我觉得你写的没什么问题，你说的图片位置明显的刷新的感觉的话你可以在这个钩子中加个loading试试看，或者按楼上说的img.onload方法，但是并不推荐这个方法，因为你只有一个图片还好操作，如果多张图片这个地方就 尴尬了，建议用图片懒加载。

Answer 7

body添加个v-cloak呢

Answer 8

楼主解决了吗？我也想实现这个，让数据统一返回后再渲染页面，要不然等数据回来后，页面又要二次刷新。
created 中请求数据是异步操作的，所以不影响后面mounted，我最后用v-show实现了，先挂载dom等数据回来后再更改v-show，v-if不行。
楼主最后怎么实现的，vue生命周期中有没有什么方法，可以控制后面的生命周期执行，找了好久没找到