【Vue.js】ルーティングによる画面切り替え｜Vue Routerの基本構成と実装手順

# 新しく始めるなら：対話で「Vue Router」を選ぶと、最初から組み込まれる
npm create vue@latest

# 既存のプロジェクトに追加する場合（Vue 3 用は Vue Router 4）
npm install vue-router@4

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
]

const router = createRouter({
  // HTML5 の履歴モード。きれいな URL（/about）になる
  // import.meta.env.BASE_URL は、サブフォルダに置くときの基準のパス（create-vue の既定の書き方）
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// use() は、mount() より前に呼ぶ
createApp(App).use(router).mount('#app')

<!-- src/App.vue -->
<template>
  <nav>
    <!-- <a> の代わりに RouterLink を使う：ページを再読み込みせずに、URL だけが変わる -->
    <RouterLink to="/">Home</RouterLink>
    <RouterLink :to="{ name: 'About' }">About</RouterLink>
  </nav>

  <!-- 現在のルートのコンポーネントが、ここに表示される -->
  <RouterView />
</template>

<style scoped>
/* 現在のページのリンクには、自動でクラスが付く */
nav a.router-link-exact-active {
  font-weight: bold;
}
</style>

<!-- src/views/UserDetail.vue -->
<script setup>
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()      // 現在のルート（パラメータやクエリを読む）
const router = useRouter()    // ルーター本体（遷移させる）

// ルートの定義：{ path: '/user/:id', component: UserDetail }
// /user/123 を開いたとき、route.params.id は '123'（文字列）

function goHome() {
  router.push('/')            // プログラムから遷移する
}
</script>

<template>
  <h1>ユーザー {{ route.params.id }}</h1>
  <button type="button" @click="goHome">トップへ戻る</button>
</template>

location / {
  # ファイルやディレクトリが無ければ、index.html を返す
  try_files $uri $uri/ /index.html;
}

# .htaccess（Apache の場合）
<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  # 実在するファイルやディレクトリでなければ、index.html に渡す
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

// routes の最後に置く：どのルートにも一致しなかった URL を受け止める
{
  path: '/:pathMatch(.*)*',
  name: 'NotFound',
  component: () => import('../views/NotFound.vue')
}