vue-cliで作成したプロジェクトでVue Routerを設定 | アールエフェクト

本文書ではvue-cliコマンドを利用して作成したvueプロジェクトでのVue Routerの設定手順について説明を行なっています。最新のvue-cliのバージョンを利用するとVueのバージョンを選択することができます。本文書では最新バージョンのVue CLI v4.5.11で動作確認を行っているためVue2, Vue3の両方で動作確認を行っています。 Vue 2, Vue 3の両方の環境を使って説明を行っていますが本文書内でのバージョン間の違いはVueとRouterのインスタンス化に関するコードが記述されているmain.jsとrouter/index.jsファイルの2つとコンポーネントのroot要素が必ず1つという制限がVue 3からなくなったことです。Vue Routerのルーティングの設定については違いはありません。 Vue Routerを利用することでページを移動する際にページの再

[reboot_in]

“ { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },”

[bleu-bleut]

Vue Routerのバージョン4で変更、404の場合は/:pathMatch(.*)*と書く