コンポーネント内部での画面遷移 Vue.js備忘録 vol.02

##はじめに
前回に引き続き、vue.jsを触ってみて詰まった所などを備忘録としてまとめてみます。

##Vue.js（SPA）におけるブラウザバック問題

SPAでの実装に慣れている方からすると初歩的なミスかもしれないが…
このような画面遷移を行なっていた時 /hoge⇨/fuga⇨/fuga?page=2
ブラウザバックを行うと /fuga?page=2から/hogeに戻ってしまっていた。

###考えられる原因
ページネーションでの遷移がhistory.replaceState()だった（現在の履歴エントリーを新しい履歴エントリーに置換する設定）
history.pushState()にしたらいけるのでは！？！？

###history.pushStateにしたものの…
URLは/fuga?page=2⇨/fugaへ変わるが、画面が再描画されない！！
今回作成していたページはAPIを叩いて一覧表示していたため、URLのパラメータの変更を検知して再度APIを叩く処理を書く必要がありました。

##対処
/fuga⇨/fuga?page=2や、/fuga?page=2⇨/fugaへの遷移は同じコンポーネントを描画するため、同じコンポーネントインスタンスが再利用されます。古いインスタンスを破棄し、新しいものを生成するよりは効率的なのですが、同時にコンポーネント自体のライフサイクルが呼ばれないことも意味しています。
上記の問題を解消するためにvue-routerのナビゲーションガードを使用しました。
beforeRouteUpdateでパラメータの変更を検知できます。

index.js

 beforeRouteUpdate (to, from, next) {
    // ルート変更に反応する
    if(to.query !== from.query){
      this.research(to.query.page);//APIを叩く処理
    }
	next();
  }

パラメータの変更を検知し、再度APIを叩く処理を入れることで解消することができました！

##最後に
今回は初歩的なミスではありましたが、もし同様のことでお困りでしたら参考になればと思います。
もしこれより良い方法などあればぜひ教えてください！
（vue-routerの公式にしっかり説明が書いてあったのでちゃんと読んでおけばよかったな〜）

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