Vue Routerの使い方｜ルート定義・RouterLink・RouterView

Vue Routerの使い方とは

Vue Router は、Vue 公式のルーター（URL と画面を結びつける仕組み）です。Vue 公式ドキュメントは、ほとんどの SPA（1枚の HTML の中で画面を切り替えるアプリ）で、公式がサポートする Vue Router を使うことを勧めています。

Vue Router を使うと、/about のような URL ごとに、表示する部品（画面）を決められます。リンクを押しても、ページ全体を再読み込みせずに画面だけが切り替わります。この記事では、2026年10月時点の Vue Router 5.3.1 で実際に動かした例をもとに、最初に必要な使い方をまとめます。

基本（3つの部品）

部品 役割 書く場所
ルートの表（routes） URL のパスと、表示する部品の対応 src/router/index.js
<RouterLink to="…"> 画面を切り替えるリンク 画面のテンプレート
<RouterView /> URL に対応した部品を表示する場所 多くは App.vue

Vue Router の公式ガイドによると、<RouterLink> は普通の <a> タグの代わりに使い、ページを再読み込みせずに URL を変えます。<RouterView> は、今の URL に対応する部品を表示する場所で、どこかに置かないと何も表示されません。

サンプルコード（実行結果つき）

src/router/index.js（create-vue で Router を選ぶと作られるものに、2つのルートを足しました）

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/users/:id', name: 'user', component: () => import('../views/UserView.vue') },
    { path: '/', name: 'home', component: HomeView },
    { path: '/about', name: 'about', component: () => import('../views/AboutView.vue') },
  ],
})

export default router

src/App.vue

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <nav>
    <RouterLink to="/">ホーム</RouterLink> |
    <RouterLink to="/about">このサイトについて</RouterLink>
  </nav>
  <RouterView />
</template>

src/views/UserView.vue（URL の一部を受け取る画面）

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
</script>

<template>
  <h2>ユーザー {{ route.params.id }} のページ</h2>
</template>

src/main.js では、app.use(router) を app.mount('#app') より前に書きます（create-vue で作れば、最初から書かれています）。

動作確認（検証環境と結果）

  • Vue 3.5.43、Vue Router 5.3.1、Vite 8.3.3、Microsoft Edge、2026年10月。
  • 「このサイトについて」を押すと、再読み込みなしで URL が /about に変わり、About の画面が表示されました。
  • /users/42 を開くと「ユーザー 42 のページ」と表示されました。:id の部分が route.params.id に入っています。
  • npm run build した dist を、フォールバックの設定がない簡易サーバーに置いて /about を直接開くと、404 になりました（npm run preview では表示されました）。

Vue Routerの使い方の注意点

  • createWebHistory と公開時の 404： 普通の URL（/about）で切り替える方式です。見た目はきれいですが、/about を直接開いたり再読み込みしたりすると、サーバーがそのファイルを探して 404 を返します。Vue Router の公式は、見つからない URL に index.html を返す設定（フォールバック）をサーバーに足すよう案内しています。
  • createWebHashHistory： URL に # が入る方式（/#/about）で、サーバーの設定は不要です。ただし、公式は SEO（検索での扱い）に悪い影響があると説明しています。
  • () => import(...) の書き方： その画面を開いたときに初めて読み込む書き方（遅延読み込み）で、最初に読み込むファイルを小さくできます。
  • $route（今の URL の情報）と $router（移動させる道具）は、r が1文字違うだけなので混同に注意します。<script setup> では useRoute() と useRouter() を使います。

Vue Routerの使い方でよくあるミス

  • <RouterView /> を置き忘れて、何も表示されない。
  • 画面の切り替えに <a href="/about"> を使い、ページ全体が再読み込みされる（共有データも消える）。
  • 公開後に、再読み込みで 404 になる（フォールバック未設定）。

Vue Routerの使い方のチェックリスト

  • [ ] routes に path と component を書いた
  • [ ] App.vue に <RouterView /> を置いた
  • [ ] 画面の切り替えに <RouterLink> を使った
  • [ ] URL の値は useRoute() の params で受け取った
  • [ ] 公開先のサーバーにフォールバックを設定した

Vue Routerの使い方のFAQ（よくある質問）

Q. JavaScript の中から画面を移動させたいです。

A. useRouter() で router を取り出し、router.push('/about') のように書きます。

Q. 存在しない URL のときに「見つかりません」の画面を出したいです。

A. ルートの表の最後に、すべての URL に当たるルートを書き、専用の画面を表示させる方法があります。書き方は Vue Router の公式ガイドで確認してください。

Q. Vue Router は CDN でも使えますか？

A. 使えます。公式ガイドでは、グローバルビルドでは VueRouter というグローバル変数から取り出すと説明しています。ただし、ガイドの多くの例は、Vite と .vue ファイルを前提にしています。

筆者の見解（Vue Routerの使い方）

Vue Router でつまずく原因は、書き方よりも「公開したときの 404」だと感じます。開発中は npm run dev が自動でフォールバックしてくれるため、問題に気づかないまま公開してしまうからです。私は、Router を入れた時点で、公開先のサーバーにフォールバックを設定できるかを先に確かめておくことを勧めます。

Vue Routerの使い方の関連項目

出典（一次情報）

タイトルとURLをコピーしました