vue-router の使い方 [Vue.js]

vue-router

参考：

Vue Router [公式]

vuejs/vue-router: The official router for Vue.js – GitHub

ドキュメント

参考：

API リファレンス | Vue Router [公式]

導入

参考：

Vue-router を使って、SPA をシンプルにはじめてみる – Qiita

今さら聞けない？ Vue Router – Qiita

vue-router を使って SPA の足回りを作ってみた – Qiita

コンポーネントインスタンスの再利用

参考：

コンポーネントインスタンスの再利用について – Qiita

watch における immediate オプションの利用

created と $route を watch する処理で同じハンドラを呼び出している。

created () {
  this.fetchData()
},
watch: {
  $route () {
    this.fetchData()
  }
}

created と watch の処理は、watch の immediate オプションを使って、下記のように簡単な表記に書き換えられる。

watch: {
  $route: {
    handler: 'fetchData',
    immediate: true
  }
}

watch の immediate オプションに true を指定すると即座に実行されるので、created で指定したのと同じになる。

参考：

コンポーネントインスタンスの再利用について – Qiita