vuejsでデータセットやレンダリングが終了してからページを切り替えるには

Question

表題のように、あるページから別のページ（もしくはページ内のある部分の書き換えActionを行ったとき）に移行しようとした際、私のアプリは読み込んだDOMからポンポンと表示してしまいます。
これによりページがパズルのように部分部分で出来上がってくる、非常に見栄えの悪い仕様になってしまっています。

一般的なSPAは全ての読み込みが終わった後に、一気にページを表示させるようにコーディングされているかと思いますが、これをVuejsでやるためにはどのようにしたらいいでしょうか。

初歩的な理解が出来ていないので、なるべく簡単な解説を頂ければ幸いです。
ヒントとなるキーワードなども歓迎いたします。

Answer 1

読み込みが終わるまでローディング画面を表示して、
終わったらコンテンツを表示するのが常套手段かなと思います。

サンプルです↓
https://jsfiddle.net/9bnyff9g/
setTimeoutの部分はAjax読み込みに置き換えてください。

読み込み領域が複数ある場合は、Promise.allを使ってまとめると良いと思います。

Comments

[supermaruetsu]

ご回答頂いた内容で解決に至りました。本当にありがとうございました。