Vue Routerでページ遷移を作る｜一覧・詳細・登録・編集の基本

※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。

コンポーネントで画面の部品は作れるようになっても、「一覧ページから詳細ページへ移動する」ようなページの切り替えはどうやるのか、最初は分かりませんでした。Vue で作る SPA（1つのHTMLで複数ページを表現するアプリ）では、この役割を Vue Router が担います。この記事では、一覧・詳細・登録・編集という業務アプリの定番ページを例に、基本を整理します。

※ 学習用に調べた内容を個人的にまとめたものです。文章は AI の補助を受けて作成しています。

Vue Router＝URLと画面コンポーネントの対応表
ルートを定義する
router-view と router-link
router-link と router.push の違い
動的パラメータ :id を受け取る
もっと体系的に学ぶなら（書籍）
次に読む

Vue Router＝URLと画面コンポーネントの対応表

Vue Router がやることは、突き詰めると「この URL のときは、この画面コンポーネントを表示する」という対応づけです。業務アプリでよくあるページ構成なら、こんな対応になります。

URL	画面
`/tasks`	タスク一覧
`/tasks/new`	新規登録フォーム
`/tasks/:id`	タスク詳細（:id は動的）
`/tasks/:id/edit`	編集フォーム

ルートを定義する

URL と画面コンポーネントの対応を routes にまとめ、createRouter で作ります。

// src/app/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import TaskListPage from '@/features/tasks/pages/TaskListPage.vue'
import TaskDetailPage from '@/features/tasks/pages/TaskDetailPage.vue'

const routes = [
  { path: '/tasks', name: 'task-list', component: TaskListPage },
  { path: '/tasks/:id', name: 'task-detail', component: TaskDetailPage },
]

export const router = createRouter({
  history: createWebHistory(),
  routes,
})

あとは main.ts で app.use(router) すれば準備完了です。

router-view と router-link

<router-view> は「今の URL に対応する画面がここに表示される」差し込み口。<router-link> はページ移動用のリンク（<a> の Vue Router 版）です。

<!-- App.vue -->
<template>
  <nav>
    <router-link to="/tasks">タスク一覧</router-link>
  </nav>

  <!-- ここに現在ページの画面が入る -->
  <router-view />
</template>

<router-view> の置き忘れは「リンクを押しても何も表示されない」の定番原因なので注意です。

router-link と router.push の違い

移動には2通りあります。テンプレートに書くリンクは router-link、処理の中で移動させたいときは router.push を使います。

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

async function onSaved() {
  // 保存が終わったら一覧へ戻す、のような使い方
  router.push('/tasks')
}
</script>

router-link … 画面上のリンク（クリックで移動）
router.push … 「保存後に一覧へ戻す」など処理の流れの中で移動

動的パラメータ :id を受け取る

/tasks/:id の :id は URL ごとに変わる値。詳細ページ側では useRoute で受け取ります。

<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()
const id = route.params.id   // 例: "42"
// この id を使って詳細データを取得する
</script>

最初は認証ガードなどの複雑な機能は入れず、「URL と画面を対応させる」「一覧・詳細・登録・編集を分ける」「:id で対象を切り替える」までを押さえれば、業務アプリの骨格は作れます。