Vue.js Routerとは？初心者にもわかりやすい使い方と実務での活用方法を解説

フロントエンド開発•2025/1/21

はじめに

Vue.jsを学んでいると、Vue.js Router という言葉を耳にすることがあるのではないでしょうか。これはVue.jsの公式ルーティングライブラリで、単一ページアプリケーション内のページ遷移やURL構造を管理するために使われるものです。

単一ページアプリケーションでは、画面の一部分だけを切り替えて動的に表示を更新するケースが多いです。そのため、ページの移動をどう扱うかがとても大事です。

Vue.js Routerを導入すると、複数ページを作るような感覚でコンポーネントを切り替えられます。初心者にとっては使い方が分かりづらいかもしれませんが、このツールを覚えるとURLごとに適切なコンポーネントを表示できるようになります。

ここでは導入手順やルート定義の仕組みを確認しながら、実務でのメリットや注意点もあわせて解説します。最後まで読むと、Vue.js Routerを使ったアプリケーション開発のイメージが具体的につかめるはずです。

Vue.js Routerとは

Vue.js Router はVue.jsに特化した公式のルーティングライブラリです。 URLとコンポーネントとの対応付けを管理し、画面遷移のロジックを整理できます。

たとえば、ユーザー一覧ページとユーザー詳細ページを分けたい場合、ルーティング設定を行うだけでURLに応じたコンポーネントを出し分けられます。ページをリロードせずにコンテンツを切り替えるので、ユーザーの体感速度が向上します。

実際の業務で利用するときは、画面ごとにコンポーネントを切り分け、そのコンポーネントをVue.js Routerで紐付けます。これにより、単一ファイルコンポーネントごとに機能を分割しやすくなり、チーム開発でも役割分担が明確になります。

公式ドキュメントでは、Vue Router 4が推奨されており、Vue 3に最適化されています。 Vue 3を使うなら、自然にVue Router 4を選ぶと考えてもよさそうです。モジュールのインポート方法や設定の書き方は、このバージョンで統一されています。

Vue.js Routerを導入する流れ

Vue.js Routerを使いたいときは、まずnpmなどでインストールします。そのあと、プロジェクトの中でルーターを作成して、Vueインスタンスに組み込みます。

インストール例は以下のようになります。


npm install vue-router

インストール後はルーター設定用のファイルを作ります。多くの場合は src/router/index.js や src/router/index.ts という名前で管理します。そこにルートの定義と、Vue Routerを作る処理を書き加えます。

たとえば、Vue 3を想定した設定ファイルは次のようになります。


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({
  history: createWebHistory(),
  routes
})

export default router

最後に、この router を main.js や main.ts に登録します。これでSPA(単一ページアプリケーション)のルーティングが使えるようになります。

単一ページアプリケーションでの役割

Vue.jsを使った開発では、 単一ページアプリケーション (SPA) の構造が主流です。この構造だと、ページをまたぐような複雑な画面構成でも、実際には1つのHTMLファイルで処理します。

Vue.js Routerは、その中で疑似的に複数ページを再現します。具体的にはURLを監視して、パスに応じたコンポーネントを表示する仕組みです。画面を切り替えているように見えますが、実際にはページ全体のリロードが発生しないので操作がスムーズです。

実務でのシーンでは、ユーザープロフィールページや商品一覧ページ、カートページなどを分割しておき、URLパスによって表示内容を切り替えます。サーバー側にリクエストを送る必要が少ないので、体感的にも動作が軽快になります。

デバッグもしやすくなります。コンポーネントごとにコードをまとめておけば、ルーティングでどこかのページだけに不具合が出ても、該当コンポーネントを見れば問題を特定しやすくなるからです。

ルーティングモード

Vue.js Routerでは、ヒストリーモード と ハッシュモード の2種類のルーティングモードが使われます。 createWebHistory() を使うとヒストリーモード、createWebHashHistory() を使うとハッシュモードで動作します。

ヒストリーモードはURLがシンプルに見えます。 https://example.com/about のような形になり、見た目にもユーザーフレンドリーです。ただし、サーバーの設定によっては直接アクセスされたときにエラーになることがあるので、適切なリダイレクトを用意する必要があります。

ハッシュモードは、URLに # が入ります。 https://example.com/#/about のような形で遷移します。これはサーバー側の設定を細かく触らなくても動作しやすいという特徴があります。

実務での運用では、サーバー環境を調整できるならヒストリーモードを使うケースが多いです。 SEOの観点でもURLが自然に見えるため、後々の拡張もしやすいと考えられます。

ルート定義の基本形

ルートを定義するときは、ルートリストを配列でまとめます。各ルートには path, name, component などを指定します。ここで、pathはURLに相当し、componentは表示させたいVueコンポーネントです。

次のように書くと、/users にアクセスするとUsersコンポーネントが表示されます。


import Users from '@/views/Users.vue'

const routes = [
  {
    path: '/users',
    name: 'Users',
    component: Users
  }
]

nameは画面の一意な名前を示すもので、プログラムから遷移するときなどに使います。実務においては、pathが増えても整理しやすいようにnameをきちんとつけておくと混乱が減ります。

また、ページが増えるとルート設定ファイルが大きくなります。そのため、一定の粒度でモジュール分割し、必要なルートだけをまとめたファイルを作ることもあります。これにより、機能ごとに担当者を分けても開発しやすくなります。

ネストされたルート

ネストされたルート という仕組みを使うと、親のルートの中に子ルートを設定できます。例えば users というURLの中に、users/:id や users/:id/edit を作る場面です。

Vue.js Routerでは、子ルートを定義すると、親コンポーネント内の <router-view> に子コンポーネントの内容が表示されるようになります。これは、ユーザープロフィールや設定ページなど、まとめて管理したい部分に役立ちます。

具体例として、親ルート/users の下に、子ルート/:id を作る例を見てみましょう。


import UserList from '@/views/UserList.vue'
import UserDetail from '@/views/UserDetail.vue'

const routes = [
  {
    path: '/users',
    component: UserList,
    children: [
      {
        path: ':id',
        name: 'UserDetail',
        component: UserDetail
      }
    ]
  }
]

このように書くと、/users/123 のようなURLでUserDetailが表示されます。親コンポーネントのレイアウトを使い回しながら、子コンポーネント部分だけを切り替えるイメージです。実務でも、ユーザー管理などでよく使われる方法です。

実務で使えるテクニック

Vue.js Routerには、より複雑なシーンで役立つ仕組みがあります。たとえば、パラメータ付きルート で :id のような動的セグメントを扱えば、同じコンポーネントで複数の詳細ページを使い分けられます。これは、IDの数だけページを用意しなくてよいので開発効率が上がります。

クエリパラメータ を使うと、ユーザーリストのフィルタリング条件やソート順などをURLに含めることができます。これにより、ブラウザの戻るボタンや再読み込みにも対応しやすくなります。

また、画面遷移の前後に処理を挟む方法として、ナビゲーションガード が用意されています。ユーザーログイン状況を確認して、ログインしていない場合はログインページへリダイレクトするといった実装が可能です。大規模なシステムでも、セキュリティ面で重要な機能を管理しやすくなります。

Vue.js Routerで扱える機能は多いです。しかし、公式ドキュメントを読みながら少しずつ導入すれば、段階的に活用を広げられます。

実務プロジェクトでは、チームの方針に合わせて必要な機能だけを取り入れると、過剰な複雑さを避けられます。ルート定義を細分化しすぎると管理が大変になるので、程よい単位にまとめることもコツです。

まとめ

今回は Vue.js Router を使って、単一ページアプリケーション内でのページ遷移を管理する方法を解説しました。初心者の皆さんは、まずインストールとルート定義を押さえるだけでも、基本的な構造がつかめると思います。

この仕組みを取り入れると、コンポーネントが増えたとしてもURLでページを分割しやすくなります。実際の開発でも、画面ごとに担当を割り振りやすくなるので、複数人が関わるプロジェクトにも向いています。

Vue.jsでの開発に慣れると、APIとの連携を組み合わせて動的にデータを取得したり、詳細ページでユーザーのIDを元に情報を読み込むなど、さまざまな使い方ができます。また、ルーターに加えて状態管理ライブラリを組み合わせると、さらに複雑な機能も実装しやすくなるでしょう。

Vue.js Router自体は公式ドキュメントが充実しているので、まずは基本的なルート定義から学習すると理解が深まります。プロジェクトの規模に応じて導入すると、より効率的にアプリケーションを作ることができます。ぜひ皆さんも、Vue.js Routerを活用して快適な開発を体験してみてください。