こんにちは。アイレットデザイン事業部の工藤です。今回はVue Routerのルートパラメータを使ってIDに応じてページを出し分ける実装について書いていきます。

Vue Routerとは？

Vue Routerは、Vue.jsアプリケーションにおいて、シングルページアプリケーション（SPA）を作成するための公式ルーティングライブラリです。SPAは複数のビュー（ページ）があるアプリケーションで、ページ遷移が行われてもページ全体をリロードすることなく、コンポーネントを再利用しながらコンテンツの一部だけが変更される仕組みが作れます。

Vue Routerの基本的な使い方

Vue Routerを使うためには、まずインストールと設定が必要です。プロジェクトのルートディレクトリで、ターミナルに以下のコマンドを打ち込んでVue Routerをインストールします。

npm install vue-router

サンプルコード

今回は実際に以下のようなwebサイトを作成してみました。

import { createRouter, createWebHistory } from 'vue-router';

import HomeView from '../views/HomeView.vue';
import AboutView from '../views/AboutView.vue';
import UserIndexView from '../views/UserIndexView.vue';
import UserDetailView from '../views/UserDetailView.vue';
import UserChangeView from '../views/UserChangeView.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView,
  },
  {
    path: '/user/index',
    name: 'user-index',
    component: UserIndexView,
  },
  {
    path: '/user/detail/:id',
    name: 'user-detail',
    component: UserDetailView,
  },
  {
    path: '/user/change/:id',
    name: 'user-change',
    component: UserChangeView,
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  linkActiveClass: 'is-active',
});

  next();
});

export default router;
  • 冒頭のimport文では、Vue Routerの依存関係と各ページ用のコンポーネントをインポートしています。
  • routes配列では、アプリケーションの各ルートを定義しています。各要素はpathでURLのパスを指定し、nameでルートの名前を定義し、componentで表示するコンポーネントを指定しています。
  • createRouter関数でルーターインスタンスを作成しています。createWebHistory関数は、ブラウザ履歴を使用するための設定です。
  • 66行目〜のrouter.beforeEachメソッドは、ページ遷移前に実行される処理を設定しています。ここでは、ページのタイトルとメタデータを設定しています。

ルートパラメータを使ってIDに応じてページを出し分ける

さて、上記コードから抜粋した下記の部分では、コロン:を使い、ルート定義に動的なルートパラメータを含め、IDに応じたページを出し分けを実装しています。

{
path: '/user/detail/:id',
name: 'user-detail',
component: UserDetailView,
},

/user/detail/の後に任意のIDが来るURLを受け取り、UserDetailViewコンポーネントを表示します。:idは動的なルートパラメータを表し、その値に応じてAPIの配列化されたjsonファイルから異なるユーザーの詳細情報を取得し表示できます。

まとめ

Vue Routerを使用して動的なルートパラメータを活用したページ出し分けを実装すれば、ユーザーが異なるページにアクセスする際に、いちいちサーバーからのデータ取得とページの再読み込みを行う手間を省き、アプリケーション全体のレスポンス性とパフォーマンスを向上させることが可能となり、よりスムーズなユーザーエクスペリエンスが実現することがわかりました。
まさにinside UI/UXというテーマにふさわしいまとめになったのではないかと思います？ではまた…