Vue SPAでのAPIデータ取得のタイミングについて

Question

Vue.jsでSPAを作成したくて勉強中で、
写真一覧画面（リストビュー）があり、サムネイルをクリックするとVue Routerで詳細画面に遷移する簡単な画面を作成しました。

一通り動作はするのですが下記の挙動で悩ましく感じています。

・詳細画面を表示し一覧に戻る際に一覧画面のcreatedイベントが都度発火しデータ取得が実行され、一覧画面の表示が遅いです。

希望する動作イメージは、

・一覧画面では初回のみデータ取得を行う
・詳細画面から戻ってきた時にクリックした時のそのままの画面に戻る
（スクロール位置を保持したい）

現在は、一覧画面のcreatedのタイミングでaxiosにてjsonデータを取得しております。
レンダリング前のデータ取得では画面が数秒真っ白になってしまうため、UX的にネガティブでした。

ファイル構造

leyouts/default.vue ベースレイアウト

pages/index.vue <= 一覧画面
pages/detail/_id.vue <= 詳細画面

SPAモードで動作させたく、今回の様な場合のデータ取得のタイミングはどの様に行えばよいのしょうか。
ご教授頂ければ幸いです。

Answer 1

実現方法としては、一覧画面表紙時に、取得したデータをキャッシュして保持する、vuex等で保持する
2回目以降は保持したデータと比べて差分更新
みたいなことになるのかな、と思ったのですが、あまりきれいではない気がします。

詳細画面表示を、モーダル等で行うことは可能でしょうか？全画面表示のモーダルもあると思いますので、動作的にはモーダルを使った実装のほうがすっきり解決できる気がします。