vue-router（v4.x）でNotFoundページを実装する方法をまとめていきます。

vue-router（v3.x）までのやり方

// コンポーネント
import NotFound from '../views/NotFound'

const routes = [
    /*
        省略
    */
    { path: '*', component: NotFound },
]

vue-router（v3.x）までのバージョンであれば上記のように「path: ‘*’」ですべてのリクエストパスをキャッチすることができており、他に定義しているルーティングに該当しないリクエストパスをすべてNotFoundとして扱うことができていました。

vue-router（v4.x）でのやり方

// コンポーネント
import NotFound from '../views/NotFound'

const routes = [
    /*
        省略
    */
    { path: '/:pathMatch(.*)*', component: NotFound },
]

vue-router（v4.x）では、「path: ‘*’」でのリクエストパスキャッチができなくなっています。

代わりにカスタム正規表現の「pathMatch」を使って、他に定義しているルーティングに該当しないリクエストパスに対して全てNotFoundコンポーネントを表示するようにできます。

まとめ

というわけで今回は、vue-router（v4.x）でのNotFoundページの実装方法をまとめました。

vue-routerのバージョン変更によってパスマッチングの仕様が変更されることがありますので、特に既存サイトのライブラリ更新を行う際は不具合につながる恐れがありますので注意しましょう。

参考リンク

・Vue Router公式サイト