プログラミング

Vue.js ルーティング完全ガイド

最終更新： 22/03/2025
1 分の読み

Vue.jsを使って、単一ページアプリケーション（SPA）を構築する際に重要な技術の一つが「ルーティング（Routing）」です。Vue.jsは、コンポーネントベースのフレームワークとして、アプリケーションを小さなパーツに分割し、それらを動的に組み合わせて動作させることができます。そして、Vue Routerは、そのコンポーネントを適切に表示するための重要なツールです。この記事では、Vue.jsにおけるルーティングの基本から、実際にSPAを作成する手順までを詳しく解説します。

1. Vue.jsとは？

Vue.jsは、ユーザーインターフェースの構築を簡単にするためのJavaScriptフレームワークであり、特にシングルページアプリケーション（SPA）の開発に最適です。Vue.jsでは、コンポーネントを用いてアプリケーションの各部分を管理することができ、これにより開発が効率的に行えます。Vue Routerは、Vue.jsでSPAを作成する際に必須のルーティングライブラリです。これを使うことで、ユーザーが異なるURLを訪れると異なるコンポーネントを表示させることができます。

関連記事

2. Vue Routerのインストール

まず最初に、Vue.jsプロジェクトでVue Routerを利用するためには、インストールが必要です。以下のコマンドを使って、Vue Routerをインストールします。

bash
npm install vue-router

インストールが完了したら、次にVue.jsのプロジェクトでVue Routerを使用する準備を整えます。main.jsファイルにVue Routerをインポートし、Vueインスタンスにルーターを適用します。

javascript
import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'

// ルートコンポーネントのインポート
import Home from './components/Home.vue'
import About from './components/About.vue'

// ルーターの設定
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

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

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

上記のコードでは、createRouterを使ってルーターを作成し、その中でアプリケーションのルートを定義しています。pathはURLのパスを、componentはそのパスに対応するコンポーネントを指定します。

3. ルーティングの基本

ルーターを設定した後、Vueコンポーネント間でルートを切り替えるために、とを使用します。

3.1 コンポーネント

は、ユーザーがクリックすると指定したパスへナビゲートするためのリンクを作成します。例えば、以下のコードでホームページとアバウトページに遷移するリンクを作成します。

vue

のto属性に遷移先のパスを指定することで、リンクをクリックするとそのパスに対応するコンポーネントが表示されます。

3.2 コンポーネント

は、ルーティングで定義したコンポーネントが表示される場所です。ユーザーがリンクをクリックした時、そのパスに対応するコンポーネントがこのの中にレンダリングされます。通常、はアプリケーションのレイアウトファイルに配置します。

vue

4. ネストされたルート

Vue Routerは、ネストされたルートもサポートしています。これは、親ルートの中にさらに子ルートを持たせることができるという機能です。例えば、ブログサイトで「記事」セクションの中に個別の「記事ページ」を表示する場合などに使用します。

javascript
const routes = [
  {
    path: '/blog',
    component: Blog,
    children: [
      { path: ':id', component: Post }
    ]
  }
]

上記のように、/blogというパスにアクセスするとBlogコンポーネントが表示され、その中に/blog/:idというパスがあれば、Postコンポーネントが表示されます。

5. ダイナミックルートマッチング

Vue Routerでは、パラメータをURLに埋め込んで、動的にルートをマッチングすることができます。例えば、個別のブログ記事を表示する場合、URLの一部を動的に受け取ることができます。

javascript
const routes = [
  {
    path: '/post/:id',
    component: Post
  }
]

/post/123のようなURLにアクセスすると、:id部分がパラメータとしてPostコンポーネントに渡されます。Postコンポーネント内では、以下のようにしてそのパラメータを取得できます。

javascript
props: route => ({ id: route.params.id })

このように、動的ルートを使えば、複数のページで同じコンポーネントを再利用しながら、異なるデータを表示することができます。

6. ナビゲーションガード

Vue Routerでは、ルート遷移の前後で処理を挟むことができる「ナビゲーションガード」が提供されています。これを使うことで、ユーザーが特定のページにアクセスする前に認証チェックを行ったり、ページ遷移を制御したりすることができます。

6.1 グローバルガード

beforeEachメソッドを使用すると、全てのルートに対して遷移前の処理を行うことができます。

javascript
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

上記のコードでは、遷移先のルートがrequiresAuthというメタ情報を持ち、かつユーザーが認証されていない場合は、ログインページにリダイレクトする処理を行っています。

7. まとめ

Vue.jsでSPAを作成する際に重要な役割を果たすVue Routerは、非常に強力で柔軟なルーティングシステムを提供します。コンポーネントベースの設計、動的ルート、ネストされたルートなどを駆使することで、複雑なアプリケーションを効率的に構築できます。また、ナビゲーションガードを活用することで、アプリケーションのセキュリティやパフォーマンスも向上させることができます。

Vue.jsのルーティング機能をマスターすれば、シングルページアプリケーションの開発は非常にスムーズになります。ぜひ、この情報をもとに、あなたのアプリケーションに適したルーティングを設定し、素晴らしいユーザー体験を提供しましょう。

最終更新： 22/03/2025
1 分の読み
Back to top button