vue的router進(jìn)入時(shí)如果渲染頁面會(huì)卡

問題描述

路由頁面進(jìn)入時(shí)，渲染頁面會(huì)卡

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

1.vue-router跳轉(zhuǎn)路由 ,路由進(jìn)入有個(gè)300ms的執(zhí)行動(dòng)畫
2.要進(jìn)入的頁面在created的時(shí)候發(fā)送請求。
3.收到請求結(jié)果，瀏覽器渲染頁面
這個(gè)時(shí)候就有問題了，vue-router的動(dòng)畫在執(zhí)行的時(shí)候，請求結(jié)果返回，瀏覽器開始渲染數(shù)據(jù)， 這個(gè)時(shí)候就會(huì)特別卡
，我現(xiàn)在的解決辦法是在收到數(shù)據(jù)后settimeout 2OO毫秒后，在渲染數(shù)據(jù);這樣子就不會(huì)卡， 但是這樣子就會(huì)有一段等待時(shí)間。請問各位大佬， 有沒有別的辦法可以解決這個(gè)問題

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）
// 路由進(jìn)入動(dòng)畫
slider()

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

//頁面在進(jìn)入的時(shí)候發(fā)送請求
created() {

  
    this._getCommonInfo();
},      

// 設(shè)置200ms后隱藏等待框， 展示數(shù)據(jù)

    _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;
     
        });
    },

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

如果去掉延時(shí)， 頁面進(jìn)入的時(shí)候會(huì)卡， 如果不去掉延時(shí)， 頁面進(jìn)入就會(huì)看到一段時(shí)間的等待框。有沒有好的折中的辦法呢