top of page
集中できるオススメの音楽です。リラックスしながら学習を進めていきましょう。
オススメ音楽のチャンネルはこちら
執筆者の写真現役社内SEライター
2023年7月18日

【Vue.js入門】Vue Routerでのルーティング管理


【Vue.js入門】Vue Routerでのルーティング管理

はじめに


この記事では、Vue.jsのルーティング管理を効率的に行うための「Vue Router」の使用方法について解説します。基本的なルーティングの設定から、ネストされたルートや動的ルートマッチングなどの高度なテクニックまで、初心者から経験者まで幅広くご紹介します。


この記事を通じて、より洗練されたVue.js開発の技術を身につける一助としてください。



目次



Vue Routeとは


Vue RouterはVue.jsの公式ルーターであり、Vue.jsのシングルページアプリケーション（SPA）を構築する際に使用します。

これは、アプリケーションの異なる部分へのユーザーの移動を制御し、URLを使用して特定のビューやコンポーネントにユーザーを導く役割を果たします。Vue Routerは、Vue.jsとシームレスに連携し、コンポーネント間の移動をスムーズに行えるよう設計されています。


Vue Routerの重要性

Vue Routerの利用は、次のような点で非常に重要です。

  1. シングルページアプリケーションの構築：Vue Routerは、ユーザーがページをリロードすることなくアプリケーション内で異なるビューに移動できるようにするため、シングルページアプリケーションの構築に不可欠です。

  2. ユーザーエクスペリエンスの向上：Vue Routerはアプリケーションの異なるビュー間の移動をスムーズにすることで、ユーザーエクスペリエンスを向上させます。

  3. URLベースの状態管理：Vue Routerを使用すると、URLをアプリケーションの状態を示すための手段として使用できます。これにより、ユーザーがブラウザの戻るボタンを使用したり、ブックマークを作成したりすることが可能になります。

  4. ルートベースのコードスプリッティング：Vue Routerは、異なるルートに対して異なるコードを遅延ロードする機能を提供します。これにより、アプリケーションの初回ロード時間を大幅に短縮でき、パフォーマンスを向上させることが可能になります。

次の章では、Vue Routerの基本について解説していきます。



Vue Routerの基本


Vue Routerを理解し活用するためには、まず基本的な概念と使い方を押さえる必要があります。


この章ではVue Routerのインストール方法、ルートの定義方法、そしてナビゲーションリンクの作成方法について詳しく説明します。


Vue Routerのインストール方法

Vue Routerはnpmを使ってインストールできます。

まず、Vue.jsのプロジェクトを作成し、そのプロジェクトディレクトリで以下のコマンドを実行します。

npm install vue-router

これで、Vue Routerがプロジェクトにインストールされます。


ルートを定義する方法

ルートの定義は、URLとそれに対応するVueコンポーネントのマッピングを設定します。

Vue Routerを使用するためには、最初にVueRouterインスタンスを作成し、それにルートオブジェクトの配列を提供する必要があります。

ルートオブジェクトには最低でもpathとcomponentの2つのプロパティが必要です。


例えば、以下のようにルートを定義できます。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

このコードでは、2つのルートが定義されています。

/のパスがHomeコンポーネントに、/aboutのパスがAboutコンポーネントにそれぞれマッピングされています。


Vue Routerでのナビゲーションリンク作成方法

Vue Routerには、ユーザーがクリックすると特定のルートに遷移するリンクを作成するための<router-link>コンポーネントが含まれています。


以下の例では、HomeページとAboutページへのリンクを作成します。

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

これらのリンクをクリックすると、対応するコンポーネントが表示されます。

リンク先のコンポーネントは<router-view>タグ内にレンダリングされます。

したがって、アプリケーションのテンプレートは次のようになるでしょう。

<div id="app">
　<router-link to="/">Home</router-link>
　<router-link to="/about">About</router-link>
　<router-view></router-view>
</div>

以上がVue Routerの基本的な使い方です。

インストールからルートの定義、そしてナビゲーションリンクの作成までを一通り見てきました。

これらの基礎を理解し、実際に試してみることで、Vue Routerの使い方がより明確になるでしょう。


次の章では、ルーティング管理について更に深く掘り下げていきます。



Vue Routerでのルーティング管理


Vue Routerの基本を理解したら、次はルーティングの管理について深く学びましょう。


この章では、ルートの定義と管理、複数のルートの管理方法、そしてルートパラメータの使用方法について解説します。


ルートの定義と管理

Vue Routerでは、ルートは一つのパスとそれに対応するコンポーネントをマッピングしたものとして定義します。ルートは次のように定義できます。

const routes = [
  {
    path: '/user',
    component: User
  }
]

このコードでは、/userのパスがUserコンポーネントにマッピングされています。

Vue Routerのインスタンスを作成する際には、これらのルートの配列をroutesオプションとして渡します。

const router = new VueRouter({
  routes
})


複数のルートを管理する方法

複数のルートを管理するには、ルートの配列に複数のオブジェクトを追加します。

例えば、以下のように/userと/adminの2つのルートを定義できます。

const routes = [
  {
    path: '/user',
    component: User
  },
  {
    path: '/admin',
    component: Admin
  }
]

Vue Routerのインスタンスを作成するときに、このルートの配列をroutesオプションとして渡すと、これらのルートがアプリケーション内で有効になります。


ルートパラメータの使用方法

Vue Routerでは、動的なパスに対応するためにルートパラメータを使用することができます。

ルートパラメータは、コロン(:)で始まるパスセグメントで、その部分に一致する任意の文字列をパラメータとしてキャプチャします。


例えば、ユーザーIDを動的にルートに含めるには、以下のようにします。

const routes = [
  {
    path: '/user/:id',
    component: User
  }
]

この場合、/user/123や/user/abcのようなパスが全てUserコンポーネントにマッピングされます。

そして、idパラメータの値は$route.params.idを通じてコンポーネント内でアクセスできます。

export default {
  computed: {
    userId() {
      return this.$route.params.id
    }
  }
}

このように、Vue Routerは複雑なルーティングの要件を柔軟に管理できるように設計されています。

ルートの定義から複数のルートの管理、そしてルートパラメータの利用までを理解することで、より高度なルーティングの制御が可能になります。


次の章では、ネストされたルートについて学びましょう。



ネストされたルート


Vue Routerを活用すると、コンポーネントの階層構造を反映したルーティングを簡単に実現できます。

これは「ネストされたルート」と呼ばれます。


この章では、ネストされたルートとは何か、ネストされたルートの定義方法、そして親ルートと子ルートの関係について詳しく説明します。


ネストされたルートとは

ネストされたルートとは、あるルート内に別のルートを含むように定義したルートのことを指します。

これにより、アプリケーションのUIが親子関係や兄弟関係といった階層構造を持つ場合でも、その構造をURLに反映させることができます。


ネストされたルートの定義方法

ネストされたルートは、childrenプロパティを使って定義します。

このchildrenプロパティは、そのルートの子ルートとなるルートオブジェクトの配列です。

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
]

この例では、/user/:id/profileと/user/:id/postsという2つのネストされたルートが定義されています。

これらのルートはそれぞれUserProfileとUserPostsコンポーネントにマッピングされます。


親ルートと子ルートの関係

親ルートと子ルートは階層的な関係を持っています。

親ルートのコンポーネントは、その子ルートのコンポーネントを描画するためのアウトレットとなります。

これは、親ルートのコンポーネントのテンプレート内に<router-view>を配置することで実現します。

<div>
　<h2>User</h2>
　<router-view></router-view>
</div>

この<router-view>は、子ルートがマッチしたときに対応する子コンポーネント（この例ではUserProfileまたはUserPosts）を描画します。

ネストされたルートを理解することで、より複雑なアプリケーションのルーティング管理に対応できるようになります。


次の章では、動的ルートマッチングとその高度な使い方について学びましょう。



動的ルートマッチング


Vue Routerのパワフルな機能の1つに、動的ルートマッチングがあります。

これにより、変化するURLパラメータに対応することが可能となります。


この章では、動的ルートマッチングとは何か、動的なルートパラメータの使用方法、そしてパラメータの変更時にどのようにリアクティブに振る舞うかを詳しく解説します。


動的ルートマッチングとは

動的ルートマッチングとは、URLの一部をパラメータとして扱い、その値に基づいて異なるルートを提供する機能を指します。

これにより、ユーザIDや商品IDなど、動的に変わる値をURLに組み込むことが可能となります。


動的なルートパラメータの使用方法

動的なルートパラメータは、パスの一部をコロン（:）で始まるパラメータ名に置き換えることで定義します。

const routes = [
  {
    path: '/user/:userId',
    component: User
  }
]

この例では、:userIdが動的なルートパラメータとなります。

URLが/user/1や/user/2となると、それぞれのuserIdが1や2としてコンポーネントに渡されます。

これはthis.$route.params.userIdを使用してアクセスすることができます。


パラメータ変更時のリアクティブな挙動

動的ルートパラメータが変更されたとき、Vue Routerは対応するコンポーネントを再利用します。

そのため、新しいパラメータに基づいて何かを変更したい場合は、コンポーネント内でパラメータの変更を監視する必要があります。

これはwatchオプションを使って実現できます。

export default {
  watch: {
    '$route.params.userId': function(id, oldId) {
      // 新しいIDに基づいて何かを行います
    }
  }
}

この例では、userIdが変更されるたびにウォッチャーが反応し、新しいIDに基づいて何かを行います。

動的ルートマッチングは、ルーティングの柔軟性を大いに高めます。

この章で学んだ知識を活かし、動的なコンテンツを持つアプリケーションのルーティングを効率的に管理することができます。


次の章では、より高度なルーティングテクニックについて学びましょう。



高度なルーティングテクニック


Vue Routerの基本機能をマスターしたら、次はさらに高度なルーティングテクニックを学びましょう。


この章では、ナビゲーションガード、ルートメタフィールド、そして非同期ルートコンポーネントの利用方法について詳しく解説します。


ナビゲーションガード

ナビゲーションガードとは、特定のルートにナビゲートする前後に何かしらの処理を行うためのものです。

例えば、特定のページへのアクセスをログインユーザのみに制限するといった事が可能です。


以下に、ログイン状態をチェックしてアクセス制限を行うナビゲーションガードの例を示します。

const routes = [
  {
    path: '/private',
    component: PrivatePage,
    beforeEnter: (to, from, next) => {
      if (!isLoggedIn()) {
        next('/login')
      } else {
        next()
      }
    }
  }
]

ここでは、beforeEnterフックを使って、ログインしていない場合はログインページへリダイレクトする処理を行っています。


ルートメタフィールド

ルートメタフィールドは、ルート定義にカスタムデータを追加するのに便利です。

例えば、特定のルートが認証を必要とするかどうかを示すフラグなどを持たせることができます。

const routes = [
  {
    path: '/private',
    component: PrivatePage,
    meta: {
      requiresAuth: true
    }
  }
]

これにより、ナビゲーションガード内でto.meta.requiresAuthにアクセスすることで、ルートが認証を必要とするかどうかをチェックできます。


非同期ルートコンポーネントの利用

大規模なアプリケーションでは、すべてのルートコンポーネントを初期ロード時に取り込むと、アプリケーションの起動時間が著しく増加する可能性があります。

非同期ルートコンポーネントを利用することで、必要な時にのみコンポーネントをロードすることができます。

const routes = [
  {
    path: '/async',
    component: () => import('./AsyncComponent.vue')
  }
]

ここでは、非同期関数import()を使って、必要な時にのみAsyncComponentをロードしています。


これらの高度なテクニックをマスターすることで、Vue Routerを使ったルーティング管理の可能性はさらに広がります。ユーザ体験の向上やアプリケーションのパフォーマンス向上に大いに役立ちます。



まとめ


このガイドでは、Vue Routerを使ったルーティングの基本から高度なテクニックまでを学びました。

Vue Routerとは何か、その重要性、そして基本的なルートの定義と管理方法を理解した上で、さらにネストされたルートや動的ルートマッチングといった高度なルーティング手法を習得しました。

そして、最後にナビゲーションガード、ルートメタフィールド、非同期ルートコンポーネントの利用といった応用テクニックについて学びました。


これらの知識を活用すれば、Vue Routerを最大限に活かし、ユーザ体験の高い、効率的なシングルページアプリケーションを構築することが可能となります。

また、動的なコンテンツや大規模なアプリケーションに対応する能力も身につけたことでしょう。


ただし、これらのテクニックは一部に過ぎません。Vue Routerにはまだまだ探求すべき機能やテクニックが多く存在します。

本ブログでは様々なスキルを解説した記事を豊富に用意しています。ぜひご覧ください。


bottom of page