Help us understand the problem. What is going on with this article?

Vue.jsでナビゲーションガードを使用してデータを取得後に画面遷移させる方法

More than 1 year has passed since last update.

背景

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関数で画面遷移させています。

以上です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした