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:

Why do not you register as a user and use Qiita more conveniently?
  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
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