背景

vue.jsでライフサイクルフックのcreatedを使って何らかのデータを取得すると画面の描画後にデータが反映されるため画面がガタついてしまいます。
解決策として、vue-routerを使用している場合はナビゲーションガードを使用することができるので、データを取得後に画面遷移するようにします。

以下、Promiseを使って複数のデータを取得後に画面遷移する実装です。

実装例

export default {
    data () {
        return {
            data1: '',
            data2: '',
        }
    },
    beforeRouteEnter(to, from, next) {
        Promise.all([
            function1(),
            function2(),
        ])
        .then((res) => {
            next(vm => {
                vm.dataSet(res[0], res[1]);
            });
        })
        .catch((e) => {
            console.log(e);
        });

        function function1() {
            return new Promise((resolve, reject) => {
                http.get('https://...', res => {
                    resolve(res.data);
                }, error => {
                    reject(error);
                })
            })
        }

        function function2() {
            return new Promise((resolve, reject) => {
                http.get('https://...', res => {
                    resolve(res.data);
                }, error => {
                    reject(error);
                })
            })
        }
    },
    methods: {
        dataSet(data1, data2) {
            this.data1 = data1;
            this.data2 = data2;
        }
    },
}

beforeRouteEnterで画面遷移を止めてnext関数で遷移します。
注意点としては、beforeRouteEnterはナビゲーションが確立する前に呼ばれるため、thisを使用することができません。そのため、データの取得のみをbeforeRouteEnterで行い、next関数のコールバックでデータをセットします。
今回の実装ではPromise.all()を使用して、複数のAPIを並列に実行してPromiseが成功した場合にnext関数で画面遷移させています。

以上です。