はじめに
初めまして@chan_kakuです。
最近Vueを使い始めて、あることがきっかけでVue Routerを使い始めました。
その時に、自分がはまったことを皆さんに共有したいと思います。
Vue Routerとは？
そもそもVue Routerとは？という人のために簡単に紹介したいと思います。
詳しくはここをチェック
Vue Router
簡単に説明するとSPAを手軽に作れる優れものです笑
どうやって遷移するのか
そもそもSPAはページの更新をするときに、ページ自体を更新するのではなく、変更が必要なコンポーネントだけ更新します。
よってコンテンツごとにコンポーネントを作るため、親コンポーネントと子コンポーネントを作るのが一般的だと思います（多分）。
また、ルートを変更したいとき（ボタンを押した後の遷移など）では以下のように記述することでルートの変更ができます。
<router-link to="home"></router-link>
これをスクリプトでかくと、
router.push('home');
のようになります。
これらは、別のルートに遷移する際はあまり考慮しなくてもいいのですが、同じルートに遷移したい(更新など)時などは注意しなければなりません。
どこで詰まったのか
ようやく本題です笑
Vue Routerのどこで詰まったかと言いますと、上で記載したrouterで同じルートにpushもしくはreplaceした時に詰まりました。
子コンポーネントからrouter.pushした時に別のルートだと問題なく発火するようなのですが、SPAなので、おなじルートにrouter.push(replace)したい場面が出てきました。
そんな時、私は今まで通り子コンポーネントからrouter.pushを行なっていました。
しかしながら、このpushが任意のタイミングで発火してくれず、画面が遷移しない状況に陥りました。
なぜかわからなかった私は、色々調べてみましたがあまり良い記事が見つからず途方に暮れていました。。。。
そんな時ふと思いついたのが、pushする時に、データを子コンポーネントからemitした後、親コンポーネントでpushすればいいのではないかと。
これは、自分だけの考えではなく、先輩などに相談した結果ですが笑
結果として無事同じルートにpush(replace)することができました！！
終わりに
結果として、今まで何も考えず子コンポーネントでrouter.pushを行なっていましたが、どうやら親コンポーネントで行なったほうが安全であることがわかりました。
この方法は正解ではないかもしれませんので、何かこの辺り詳しい方が居りましたらご教授していただけると幸いです。