Vue RouterでAPIが404エラーになった場合エラー画面を表示する方法

初めに

Vue.js で 404 エラーが発生した場合、エラー画面を表示するための小ネタです。誰かのお役に立てれば幸いです。

Vue Routerとは

Vue Router（ヴュールーター）は、Vue.js アプリケーション内でクライアント側のルーティングを管理するための公式ルーティングライブラリです。シングルページアプリケーション（SPA）を作成する際に、異なる URL パスに対して異なるコンポーネントを表示するための仕組みを提供します。

今回はRouterを利用して動的ルーティングで404エラー画面を表示します。

1．Vue Routerをインストール

npm install vue-router

2．Vue Routerの設定 (Vue2の場合)

import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import ErrorPage from '@/views/ErrorPage.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  // 他のルートをここに追加
   
  // 404 エラーページ用のルート
  {
    //Vue2の場合、'/*'だけでいい
    path: '/*',  // すべてのパスをキャッチ
    name: 'error',
    component: ErrorPage
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

const app = Vue.createApp({})
app.use(router)

app.mount('#app')

2．Vue Routerの設定 (Vue3の場合)

import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import ErrorPage from '@/views/ErrorPage.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  // 他のルートをここに追加
   
  // 404 エラーページ用のルート
  {
    //Vue3の場合、'/*'だけはだめ、正規表現を利用する
    path: '/:matchAll(.*)',  // すべてのパスをキャッチ
    name: 'error',
    component: ErrorPage
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

const app = Vue.createApp({})
app.use(router)

app.mount('#app')