Posted at: 2023-01-14
【Vue.js】vue-router(v4.x)でNotFoundページを実装する
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のバージョン変更によってパスマッチングの仕様が変更されることがありますので、特に既存サイトのライブラリ更新を行う際は不具合につながる恐れがありますので注意しましょう。
参考リンク
こんな記事もオススメ
- 【Shopify】Shopify Flowを使って不正リスクの高い注文を自動キャンセルする方法Read More
- ECサイト運営側から見たライアビリティシフトと3Dセキュア2.0について解説するRead More
- Shopifyのセキュリティ対策について魅力を語ってみるRead More
- 【セキュリティ】PHPの新たな脆弱性でサーバ破壊の危険性も ― 日常のメンテナンスの重要性Read More
- 【セキュリティ】あなたのサイトは大丈夫?JSライブラリ『Polyfill.io』が有害サイトへの誘導を行うマルウェアに…Read More
- 【Shopify】ブログカテゴリにメタフィールドでアップロードしたアイキャッチ画像を表示する方法Read More