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

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

More than 1 year has passed since last update.

忘れないように記録。

解決すべき問題

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

https://router.vuejs.org/ja/guide/advanced/navigation-guards.html

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

解決策

公式サイトに書かれている通り、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ありでも流れは変わりません。
何かの助けになれば幸いです:pray:

kiyc
Webエンジニア。インフラもバックエンドもフロントエンドも書いています。 普段書いているのはPHP(Laravel)、JavaScript(Vue.js)です。
prime-order
組織と業務に変革をもたらす新しいカタチのシステム開発サービス
https://prime-order.jp/
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