vue-routerのワイルドカードキャッチ

vue-routerのワイルドカード(*)指定

vue3で使うVue Router 4で指定方法が変わってた。

import { createRouter, createWebHistory } from 'vue-router';
import HomePage from './components/HomePage.vue';
import NotFoundComponent from './components/NotFoundComponent.vue';

const routes = [
  { path: '/', component: HomePage },
  // ワイルドカードルート
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFoundComponent },
];

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

export default router;

正規表現(.)を使用してマッチさせて解決。

ん？ なんで*じゃないの？

* と (.*) の違い

Vue Router 3（Vue 2用）までは、ワイルドカードルートを指定するために単純に*を使うことが一般的でした。これは、定義された他のルートにマッチしないすべてのパスに対してマッチするようなルートを設定する簡単な方法です。

しかし、Vue Router 4（Vue 3用）では、より複雑なパターンマッチングが可能になる正規表現を使用してルートパターンを定義することが推奨されています。ここで、/:pathMatch(.)の構文が使われるわけですが、この構文の各部分には以下のような意味があります。

/:pathMatchは、マッチしたパスの一部をキャプチャして、pathMatchという名前のパラメータに格納します。これにより、ルートのコンポーネント内で動的にマッチしたパスにアクセスできるようになります。 (.)は正規表現で、「任意の文字の0回以上の繰り返し」を意味します。つまり、どんなパスにもマッチすることを意味しています。 最後のは、このパターンが0回以上繰り返されることを許可します。これは、正規表現の一部というよりは、Vue Routerのパスマッチング機能におけるワイルドカードの繰り返しを示しています。

なぜ (.) なのか

この構文が採用されている主な理由は、Vue RouterがURLパスのセグメントをより柔軟にマッチさせ、キャプチャするための機能を提供することです。/:pathMatch(.)は「どんなパスにもマッチし、その全体をpathMatchパラメータとしてキャプチャする」という意味になります。

単に*を使用した場合、Vue Router 3までの挙動と同様に任意のパスにマッチするルートを定義できますが、Vue Router 4では正規表現を使ったより詳細なパターン定義が推奨されているため、この構文が標準的な方法として採用されています。