vue的router进入时如果渲染页面会卡

Question

问题描述

路由页面进入时，渲染页面会卡

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

1.vue-router跳转路由 ,路由进入有个300ms的执行动画
2.要进入的页面在created的时候发送请求。
3.收到请求结果，浏览器渲染页面
这个时候就有问题了，vue-router的动画在执行的时候，请求结果返回，浏览器开始渲染数据， 这个时候就会特别卡
，我现在的解决办法是在收到数据后settimeout 2OO毫秒后，在渲染数据;这样子就不会卡， 但是这样子就会有一段等待时间。请问各位大佬， 有没有别的办法可以解决这个问题

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
// 路由进入动画
slider()

.slider-enter-active, .slider-leave-active 
    transition: all 300ms
.slider-enter, .slider-leave-to 
    transform: translate3d(100%, 0, 0);

//页面在进入的时候发送请求
created() {

  
    this._getCommonInfo();
},      

// 设置200ms后隐藏等待框， 展示数据

    _getCommonInfo() {
        const address = `/game/info/${this.id}?token=${this.getToken}`;
        getCommonInfo(address).then((res) => {
            console.log(res);
            setTimeout(() => {
                this.showFirstInloading = false;
            }, 200);
            this.commentScore = res.data.commentScore;
            this.comments = res.data.comments;
            this.gameInfo = res.data.gameInfo;
     
        });
    },

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

如果去掉延时， 页面进入的时候会卡， 如果不去掉延时， 页面进入就会看到一段时间的等待框。有没有好的折中的办法呢

Answer 1

在调用接口的时候加一个loading动画过渡一下