Vue Routerでのページネーションライフサイクル

忘れないように記録。

解決すべき問題

パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない

例えば検索クエリが変わっただけではコンポーネントは更新されない。

解決策

公式サイトに書かれている通り、beforeRouteUpdate(to, from, next)を使う。
/users?page=1から/users?page=2に移動するときなどに呼ばれる。

ページネーションのライフサイクル

/usersという一覧画面を考える。

index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

import UserIndex from 'path/to/UserIndex';

const routes = [
    { path: '/users', name: 'users', component: UserIndex },
];

const router = new VueRouter({ 
    mode: 'history',
    routes,
});

const app = new Vue({
    router
}).$mount('#app');

UserIndex.vue

<template>
...
</template>

<script>
export default {
    data () {
        return {
            baseUrl: '/users',
            query: {},
            data: [],
        }
    },
    mounted () {
        const url = this.makeUrl(this.baseUrl, this.$route.query);
        this.fetchUserList(url);
    },
    beforeRouteUpdate (to, from, next) {
        const url = this.makeUrl(this.baseUrl, to.query);
        this.fetchUserList(url);
        next();
    },
    methods: {
        makeUrl (url, query) {
            // 検索条件を元にURL作成
        },
        fetchUserList (url) {
            // APIなどからデータ取得
        },
        search () {
            this.query.page = 1;
            const url = this.makeUrl(this.baseUrl, this.query);
            this.$router.push(url);
        },
        changePage (page) {
            this.query.page = 1;
            const url = this.makeUrl(this.baseUrl, this.query);
            this.$router.push(url);
        },
    },
}
</script>

初回表示から検索、ページ移動の流れを以下にまとめた。

• mounted()で初回データ表示。
• 検索するとsearch()を実行、新しい検索条件のurlが作られ、それで$router.push(url)される。
• push()されると、beforeRouteUpdate()が実行されて、そこで新しい検索クエリを元にデータを取ってきて表示。
• ページ移動はページ番号を引数としたchangePage(page)が呼ばれて、新しいページ番号を含むurlが作られ、それで$router.push(url)される。
• push()されると、beforeRouteUpdate()が実行されて、そこでデータを取ってきて表示。

こんな感じでしょうか。
URLを元にして処理を実行していく感じです。
今回はVuex抜きでやったけど、Vuexありでも流れは変わりません。
何かの助けになれば幸いです