Vue.jsでページを切り替える「Vue Router」の利用法を解説！ TypeScriptの型定義とともに活用しよう

TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法 第7回

　本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue.jsのコンポーネントについて説明しました。今回は複数のコンポーネントをURLによって切り替え表示できる「Vue Router」の利用法を説明します。

はじめに

　本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型定義ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。

　本連載でこれまで扱ってきたサンプルは、基本的に1ページだけを表示するものでしたが、実際のWebページでは、URLによって異なる内容のページを切り替え表示します。Vue.jsにおいてこのような処理を実現するのが、表示するコンポーネントをURLと対応付けるVue Routerです。そこで本記事では、Vue Routerを利用したページ切り替え処理を、主にTypeScriptによる型定義の利用を中心に説明します。

対象読者

• これからVue.jsに入門したい方
• 新しいトレンドを常に取り入れたい方
• 1ページだけのVue.jsのサンプルに飽きてきた方

必要な環境

　本記事のサンプルコードは、以下の環境で動作を確認しています。

• Windows 10 64bit版
• Node.js v18.15.0 64bit版
• Vue.js 3.2.47
• TypeScript 4.8.4
• Microsoft Edge 110.0.1587.63

　サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「npm run dev」コマンドを実行して、Webブラウザーで「http://localhost:5173/」を表示します。

Vue Router対応のプロジェクトを生成して動かしてみる

　Vue.jsのプロジェクトを生成時に実行する「npm init vue@latest」コマンドでは、Vue Routerを利用するプロジェクトを生成できます。対話的に表示される「Add Vue Router for Single Page Application development?」に「Yes」と回答します。本記事ではTypeScriptを利用するので「Add TypeScript?」も「Yes」と回答します。

図1　Vue RouterとTypeScriptを有効にしてプロジェクトを生成（p001-basic）

　生成されたプロジェクトをそのまま実行すると、図2の通り実行されます。ページ内の「Home」と「About」をクリックすると、ページ右半分の表示が切り替わります（Webページはレスポンシブになっているので、Webブラウザーのウインドウ幅が狭いときには表示切替される範囲がページ下半分になります）。

図2　Vue Routerを有効にしたプロジェクトの実行結果（p001-basic）

　このサンプルで、Vue Routerの仕組みを説明します。まず、Webページ表示時に最初に実行されるmain.tsにおいて、（1）のuseメソッドでVue Routerの使用を指定しています。

［リスト1］Vue Routerの使用を指定する記述（p001-basic/src/main.ts）

const app = createApp(App)  // アプリ生成
app.use(router)             // Vue Routerの使用を指定 ...（1）
app.mount('#app')           // アプリをマウント（表示）

　リスト1（1）のrouterの内容は、router/index.tsに記述されています。

［リスト2］Vue Routerの設定記述（p001-basic/src/router/index.ts）

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // Web履歴の指定 ...（1）
  routes: [ // ルートの指定 ...（2）
    { // パスが「/」の時、HomeViewを表示 ...（2a）
      path: '/',
      name: 'home',
      component: HomeView
    },
    { // パスが「/about」の時、AboutViewを表示 ...（2b）
      path: '/about',
      name: 'about',
      // このように記述すると、動的にコンポーネントを読み込む ...（2c）
      component: () => import('../views/AboutView.vue')
    }
  ]
})
// routerをエクスポート
export default router

　createRouterメソッドでrouterを生成します。ルートの指定は（2）で、（2a）によりパスが「/」の時にHomeViewコンポーネントを、（2b）によりパスが「/about」の時AboutViewコンポーネントを表示するようにします。（2c）の通り動的インポートを指定すると、そのパスが初めて表示された時に動的にコンポーネントを読み込むようになります。

［補足］Web履歴の指定

　リスト2（1）は、URLの履歴を記録する指定です。この指定により、ブラウザーの戻る／進むボタンでページ遷移の履歴をたどれるようになります。詳細は公式ページを参照してください。

　HomeViewやAboutViewのコンポーネントは、App.vueに記述された<RouterView>要素の箇所に表示されます。また、パスへのリンクは<RouterLink>要素のto属性に指定します。

［リスト3］<RouterView>、<RouterLink>の記述（p001-basic/src/App.vue）

<RouterLink to="/">Home</RouterLink><!-- 「/」へのリンク -->
<RouterLink to="/about">About</RouterLink><!-- 「/about」へのリンク -->
（略）
<RouterView /><!-- Vue Routerによりコンポーネントが表示される箇所 -->

［補足］<RouterView>？ <router-view>？

　リスト3の<RouterLink>や<RouterView>（パスカルケースでの記述）は、<router-link>、<router-view>のようにケバブケースで記述しても動作します。CLIでプロジェクトを生成するとパスカルケースになるので、本記事では以降パスカルケースで記述します。