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

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

图片描述

图片描述

图片描述

图片描述

回答:

v-if 数据出来在渲染

回答:

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

回答:

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

回答:

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

回答:

同步加载数据,在最后一个请求成功之后再一一赋值即可。
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);
  });

回答:

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

回答:

body添加个v-cloak呢

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注