【Vue Router v4/Vue3】404ページを表示する方法

/* や * では効かなかった
うまくいった方法

/* や * では効かなかった

404ページを表示したい場合、/* や * と記載すればOKという記事をいくつか見ましたが、私の環境（Vue Router v4, Vue v3）では効きませんでした><

const routes = [
    { path: '/', component:  Home},
    { path: '/*', component: NotFound } // ココ
]

うまくいった方法

catchAllを使用すると、指定したパス以外は任意のコンポーネントが表示されます。

import { createWebHistory, createRouter } from "vue-router";
import Home from './pages/Home.vue'
import NotFound from './pages/NotFound.vue'

const routes = [
    { path: '/', component:  Home},
    { path: '/:catchAll(.*)', component: NotFound } // ココ
]

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

export default router;