Routerのナビゲーションガードですが、そのうちのよく使うbeforeRouteEnterのnextコールバックの実行タイミングが、自分が思っていたのと違っていました。},上の結果から、nextに渡したコールバック関数はVueライフサイクルフックのmountedよりも後に実行されているのが分かります。beforeRouteEnterでデータをfetchする場合は気をつけようbeforeRouteEnterはルートが確立する前、コンポーネントが描画される前にフックされます。コンポーネントが描画される前にデータを取得したい場合に、よくbeforeRouteEnterは使われるようです。beforeRouteEnterはコンポーネントのthisにアクセスできませんが、nextコールバックの引数からコンポーネントインスタンスにアクセスできます。アクセスはできないです。ナビゲーションが確立する前にガードが呼び出されるからです。したがって、新しく入ってくるコンポーネントはまだ作られていないです。コールバックを渡すことでインスタンスにアクセスすることができます。このコールバックはナビゲーションが確立した時に呼ばれ、コンポーネントインスタンスはそのコールバックの引数として渡されます。}これをふまえて、beforeRouteEnterで取得したデータをnextコールバック内でコンポーネントのdataオブジェクトのプロパティに代入し、createdやmountedなどのライフサイクルフックでアクセスしたいと思うかもしれません。};しかし、冒頭の検証でnextコールバックはmountedの後に実行されているのが分かっています。objに代入する処理はcreatedやmountedの時点で実行されていません。createdやmountedでobjにアクセスしても空の値にアクセスしていることになります。};Vuexを使えば解決できるこれはVuexで管理するなら解決できます。beforeRouteEnter内で、取得したデータをVuexのステートに入れます。createdやmountedからVuexのステートにアクセス。すれば、createdやmountedよりも早くフックされるbeforeRouteEnterで、Vuexのステートに取得したデータを入れて、その後にライフサイクルフックでVuexのステートからデータを取ってくれば良いです。最後にbeforeRouteEnterで取得したデータをmountedでゴニョっとしたい!と思っていたのですが、少しつまずいてしまいました。幸いにも、取得するデータはいくつものコンポーネントで使うので、Vuexでデータにアクセスできるようにしていて、Vuex経由でmountedでデータをゴニョる事ができました。今後、beforeRouteEnterでデータを取ってnextコールバックを使う場合は気をつけていきたいです。TsulalaAsagiri.qrunch.ioプログラミング初心者です。作ったものとかメモ代わりのTipsとか投下していきます~。Qrunch.netサーバー提供フィードバックを送信する。