【 Vue.js 】Vue Routerで404画面を作成

はじめに

Vue.js3とLaravel10を使用してポートフォリオを制作しています。
Vue Routerを導入して簡単に404画面を作成しました。

ルーティング

src/router/routes.js

import NotFoundErrorPage from '../pages/errors/NotFoundErrorPage.vue';

const routes = [
    {
        path: "/:notFound(.*)",
        name: 'error.404',
        component: NotFoundErrorPage,
    },
];

"/:notFound(.*)"で存在しない全てのURLに対して、404エラー画像を出力します。

404 Not foundルートについての参考文献

vue画面(フロント)

フロント側の画面です。

src/pages/errors/NotFoundErrorPage.vue

<template>
    <div class="container">
        <h1>404</h1>
        <p>Sorry, the page <code>{{ $route.params.notFound }}</code> you're looking for is not found</p>
        <router-link :to="{ name: 'recipes' }" class="text-blue-600">Back to your recipes</router-link>
    </div>
</template>

{{ $route.params.notFound }}でこのページは存在していませんよ。という表示を行っています。

例えば

「aaaa」というページは存在しません。

「bbb」というページは存在しません。

上記のように表示できます。