vue-routerでURLパラメーターの変更を検知する

vue-routerでURLパラメーターが変更されたタイミングで、なにかしらの処理を実行したい場合の方法についてです。

コードは以下の通りです。

<script>
    const routes = [
        { path: '/' },
        { path: '/article/:id' },
    ];

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

    window.onload = function () {
        initApp();
    }

    function initApp() {
        const app = new Vue({
            el: '#vue-app',
            router,
            template: '#example-component',
            data: function () {
                return { }
            },
            mounted() {
                this.loadArticle()
            },
            methods: {
                loadArticle() {
                    console.log(this.$route.params.id);
                }
            },
            watch: {
                '$route'(to, from) {
                    this.loadArticle()
                }
            }
        });
    }
</script>

<script type="text/x-template" id="example-component">
    <div>テスト</div>
</script>

パラメーターに変更があった場合、「watch」で定義したメソッドが呼び出されます。

※ 上記のコードは作成済みのソースから必要そうな箇所を抜き取っただけなので、動作しない可能性があります。参考レベルにとどめておいてください。

• Vue Router | 動的ルートマッチング