【Vue.js】ページ遷移時にローディング画面を表示する方法｜SPAでのUX向上

Vue.jsでSPA（シングルページアプリケーション）を構築する場合、ページ遷移が瞬時に行われる反面、APIの取得や描画が完了するまでに一瞬の待機が発生することがあります。このとき、ユーザーに無反応と感じさせないために「ローディング画面（ローディングインジケーター）」を表示するのが有効です。

Vue Routerとローディング状態の連携

Vue Routerを使用している場合、ルートの遷移イベント（beforeEach, afterEachなど）を使うことでローディング画面の表示制御が可能です。以下のように、アプリケーションのルートファイルにローディング制御のロジックを追加します。

ローディング用コンポーネントの作成

App.vueでローディング状態を管理

UXを意識した工夫

ローディング表示は速さよりも“確実な視覚変化”を重視するとユーザー体験が向上します。特に以下のような工夫が効果的です。

• 表示を最短でも300ms程度維持して「ちらつき」を抑える
• API通信が終わるまでのローディングに切り替える（API完了時に非表示）
• ローディング中は操作を無効化して意図しない動作を防止

まとめ

Vue.jsでSPAを構築する際は、ルーティングにローディング画面を組み込むことで、ユーザーに快適な操作体験を提供できます。ルートの遷移イベントを活用し、ローディングのオン・オフを制御することで、スムーズなページ遷移とUXの向上が実現できます。