2023-06-17

Vue Router v4でpathに*が使用できなくなっていた

Vue Router V4 で 404 ページを作成

ページコンポーネントのNotFoundPage.vueを作成

router/index.tsに 404 ページ用のルートを追加

    // 一番下に追加、その他全てに合致させる
    {
      path: '*',
      name: 'notFound',
      component: () => import('@/pages/NotFoundPage.vue'),
    }

しかし、下記コンソールエラーが発生

Uncaught Error: Catch all routes ("*") must now be defined using a param with a custom regexp.

公式ドキュメントによると、代わりにpathMatchを使用するとのこと

    {
      path: '/:pathMatch(.*)*', // 変更
      name: 'notFound',
      component: () => import('@/pages/NotFoundPage.vue'),
    }

存在しないページにアクセスして 404 ページが表示されたら OK