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

<!-- App.vue（よくある書き方） -->
<script>
export default {
  data() {
    return { isLoading: false }
  },
  created() {
    this.$router.beforeEach((to, from, next) => {
      this.isLoading = true            // どんな遷移でも、すぐ表示する
      next()
    })
    this.$router.afterEach(() => {
      setTimeout(() => {
        this.isLoading = false         // 500ms 後に消す（タイマーを管理していない）
      }, 500)
    })
  }
}
</script>

// composables/useRouteLoading.js
import { ref } from 'vue'

const SHOW_DELAY = 200   // これだけ時間がかかったときだけ、表示を始める（ミリ秒）
const MIN_SHOW = 300     // 表示したら、最低これだけは残す（ちらつき防止）

// 関数の外に置き、ルーターとコンポーネントで同じ状態を共有する
const isLoading = ref(false)
let showTimer = null
let hideTimer = null
let shownAt = 0

function start() {
  clearTimeout(hideTimer)                       // 直前の「消す予約」を取り消す
  if (isLoading.value || showTimer !== null) return

  showTimer = setTimeout(() => {
    showTimer = null
    isLoading.value = true
    shownAt = Date.now()
  }, SHOW_DELAY)
}

function finish() {
  // まだ表示前なら、予約を取り消す（速い遷移では、ローディングを出さない）
  if (showTimer !== null) {
    clearTimeout(showTimer)
    showTimer = null
    return
  }
  if (!isLoading.value) return

  // 表示してから MIN_SHOW 経つまで待って、消す
  const wait = Math.max(0, MIN_SHOW - (Date.now() - shownAt))
  hideTimer = setTimeout(() => {
    isLoading.value = false
  }, wait)
}

export function useRouteLoading() {
  return { isLoading, start, finish }
}

// router/index.js
import { createRouter, createWebHistory, isNavigationFailure, NavigationFailureType } from 'vue-router'
import { useRouteLoading } from '@/composables/useRouteLoading'

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 遅延読み込み：初回に画面のコードをダウンロードするため、遷移に時間がかかる
    { path: '/', component: () => import('@/views/Home.vue') },
    { path: '/reports', component: () => import('@/views/Reports.vue') }
  ]
})

const { start, finish } = useRouteLoading()

// 遷移の開始。何も返さない（undefined）ので、遷移は許可される
router.beforeEach(() => {
  start()
})

// 遷移の終了。失敗した場合は、第3引数 failure に入る
router.afterEach((to, from, failure) => {
  // cancelled：新しい遷移が始まって、前の遷移が打ち切られた。
  // 新しい遷移がこのあと finish() を呼ぶので、ここでは消さない
  if (isNavigationFailure(failure, NavigationFailureType.cancelled)) return
  finish()
})

// ガードの中で例外が起きた場合。afterEach は呼ばれないので、ここで戻す
router.onError(() => {
  finish()
})

<!-- components/RouteLoadingBar.vue -->
<script setup>
import { useRouteLoading } from '@/composables/useRouteLoading'

const { isLoading } = useRouteLoading()
</script>

<template>
  <!-- 画面の上部に出る、細いバー（見た目だけ。読み上げからは外す） -->
  <Transition name="fade">
    <div v-if="isLoading" class="loading-bar" aria-hidden="true"></div>
  </Transition>

  <!-- 読み上げ用。この要素は常に DOM にあり、文言だけが変わる -->
  <p class="visually-hidden" role="status">{{ isLoading ? '読み込み中です' : '' }}</p>
</template>

<style scoped>
.loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 3px;
  background: #42b983;
  transform-origin: left;
  animation: loading 1.2s ease-in-out infinite;
}
@keyframes loading {
  0% { transform: scaleX(0); }
  70% { transform: scaleX(0.8); }
  100% { transform: scaleX(1); opacity: 0.3; }
}
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/* 画面には見せず、読み上げソフトにだけ伝える */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 「動きを減らす」設定の人には、アニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  .loading-bar { animation: none; }
}
</style>

<!-- App.vue -->
<script setup>
import RouteLoadingBar from '@/components/RouteLoadingBar.vue'
</script>

<template>
  <RouteLoadingBar />
  <RouterView />
</template>

// 遷移の「前に」データを取得したいルートだけ、meta に取得関数を持たせる
{
  path: '/reports',
  component: () => import('@/views/Reports.vue'),
  meta: { preload: () => fetch('/api/reports').then((r) => r.json()) }
}

// beforeResolve：遷移が確定する直前に、実行される
router.beforeResolve(async (to) => {
  if (to.meta.preload) {
    await to.meta.preload()        // 終わるまで、遷移は保留される（その間、ローディングが出る）
  }
})