Vue.js でシングルページアプリケーションを構築するには、Vue Router の導入が不可欠です。以下に、最小限の環境からルーティング機能を整えるまでの手順を解説します。

プロジェクトの初期化

任意のディレクトリでコマンドプロンプトを開き、次のコマンドを実行して Vue プロジェクトを生成します：

npm create vue@latest

対話形式で設定が進みます。ルーティング機能（Vue Router）は必ず有効にしてください。その他のオプション（TypeScript, ESLint など）は必要に応じて選択します。

不要ファイルの整理

生成された src/ ディレクトリ内のサンプルコンポーネントや不要なファイルを削除し、最低限の構成に整えます。

ビュー用コンポーネントの配置

ルートコンポーネントは通常 src/views/ ディレクトリに配置します。事前に作成した Home.vue, CreateForm.vue, EditForm.vue をこのディレクトリに格納します。

ルート定義の記述

src/router/index.ts を新規作成または上書きし、以下の内容を記述します：

import { createRouter, createWebHistory } from 'vue-router'
import HomePage from '@/views/Home.vue'
import CreatePage from '@/views/CreateForm.vue'
import EditPage from '@/views/EditForm.vue'

const routeTable = [
  { path: '/', component: HomePage },
  { path: '/new', component: CreatePage },
  { path: '/edit/:itemId?', name: 'itemEdit', component: EditPage }
]

const appRouter = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routeTable
})

export default appRouter

各ルートオブジェクトの主なプロパティ：

• path：URL パスパターン。動的セグメントは :paramName 形式で指定可能。
• component：マッチ時に描画されるコンポーネント。
• name（任意）：プログラム的ナビゲーションで使用する識別子。
• :itemId?：末尾の ? はパラメータが省略可能であることを示します。

メインアプリケーションへのルーター登録

src/main.ts を編集し、ルーターをアプリケーションインスタンスに組み込みます：

import { createApp } from 'vue'
import App from './App.vue'
import navigation from './router'

const app = createApp(App)
app.use(navigation)
app.mount('#app')

開発サーバーの起動

ターミナルで以下のコマンドを実行して、開発サーバーを起動します：

npm run dev

ブラウザで http://localhost:5173 にアクセスし、各パス（/, /new, /edit/123）が正しくコンポーネントを表示することを確認してください。