잊지 않도록 기록.

해결해야 할 문제

매개변수 또는 쿼리 변경은 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 있어도 흐름은 변하지 않습니다.
뭔가 도움이되면 다행입니다