vue使用elementUI的dialog弹窗，出现延时问题？

Question

问题描述

我利用elementui的dialog弹窗，包含<router-view>,
点击不同的数据，弹窗显示不同的组件，当组件的数据显示较多时，在弹窗会出现延时，请问大佬，这个怎么解决？

问题出现的环境背景及自己尝试过哪些方法

尝试先弹窗，$nextTick里加载路由，也会出现延时，可能是原组件中数据较多，导致显示变慢。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<el-dialog :title="dialogTitle"  custom-class="dialogYs"  :visible.sync="dialogVisible">
    <router-view></router-view>
</el-dialog>

openWindow(url,data,title){
  var _that=this;
  this.dialogTitle=title;
  this.dialogVisible=true;
  this.$nextTick(()=>{
    _that.$router.push({
      path:url,
      query:{
        id:data.id
      }
    })
  })

}

你期待的结果是什么？实际看到的错误信息又是什么？

怎么才能立即弹窗，弹窗之后再跳转路由？导致弹窗延迟的原因是什么？是组件内数据较多吗？

Answer 1

可以先直接修改dialog的visible的值先显示出dialog,然后再通过@opened或者@open执行其他耗时的逻辑

Answer 2

经过多重测试，解决方法：
1.方法：先让弹窗显示，改变dialog中visible的值，再用$nextTick,下一帧跳转路由，然后效果并不好，还是有延时。
延时原因：visible设为true时，弹窗不是立即显示，有一个0.3秒的动画，这0.3秒的动画在执行过程中，路由已经开始跳转了，导致弹窗内的内容渲染（有可能内容渲染阻塞了动画），从而出现延时弹窗问题。

2.不采用$nextTick，用setTimeout延时执行路由跳转，当弹窗动画执行完后，再调转路由，弹窗无延时了。（弹窗内的内容的加载过程就可见了，这样的效果比点一下过1-2秒弹窗好多了）