[Vue.js] 8. Vue Router

8.1 シングルページアプリケーション

公式ライブラリ Vue Router を利用することでシングルページアプリケーションを簡単に作成できるようになる。

8.1.1 ルーティングとは

画面遷移を伴うアプリケーションにおいて表示させる画面とパスを結び付け、特定のパスに対応して画面表示処理を行うことをルーティングという。
Vue Router は Vue と組み合わせてルーティング処理を行うライブラリである。

サンプルプロジェクト router-basic の画面の対応関係表

8.1.2 サーバーサイド Web アプリケーションでの処理の流れ

青：ブラウザ
緑：Webサーバー

1. ブラウザから TOP 画面を表示させるパスであるルート（/）にアクセス
2. Web サーバー側で処理が行われ TOP 画面表示に必要な HTML データが生成される
3. それを受け取ったブラウザがデータをレンダリングすることで TOP 画面が表示される
4. TOP 画面の[会員管理はこちら]のリンクをクリック
5. 会員リスト画面を表示させるパスである /member/memberList にアクセスする
6. Web サーバー側で処理が行われ会員リスト画面表示に必要な HTML データが生成される
7. それを受け取ったブラウザがデータをレンダリングすることで会員リスト画面が表示される
8. 以降繰り返し

このようにサーバーサイド Web アプリケーションではリンクやボタンがクリックされるたびにサーバーにアクセスが発生し、サーバーではそれを処理し、表示に必要な HTML データを原則全てサーバー側で生成する。
サーバー側で処理が行われるためサーバーサイド Web アプリケーションと呼ばれる。

8.1.3 シングルページアプリケーションとは

Vue プロジェクトで、初回にサーバーから読み込む HTML データは index.html のみである。
その index.html に付属して読み込まれる JavaScript コードがブラウザで実行されることでさまざまな画面表示が行われる。

これは Vue Router を利用したサンプルプロジェクト router-basic でも同様で、index.html が表示された後 JavaScript によってルート（/）パスに対応する TOP 画面がレンダリングされる。
この後 [会員管理はこちら] のリングをクリックすると /member/memberList パスに対応する会員リスト画面が JavaScript によってレンダリングされる。

このようにサーバーから読み込む HTML データ（ページ）がひとつしかなく（シングル）、後の画面表示処理をブラウザ側の JavaScript で行うアプリケーションをシングルページアプリケーション（Single Page Applicaten の頭文字をとって SPA）という。

8.2 Vue Router の基本

8.2.1 Vue Router のプロジェクト

Vue Router を利用するプロジェクトでは、Vue プロジェクト作成時の質問「Add Vue Router for Single Page Application development?」で「Yes」を選択する。

プロジェクトの作成が終了すると、srcフォルダ内に router フォルダと views フォルダが追加される。

router フォルダ内のは index.ts ファイルがあらかじめ作られており、このファイルがルーティングの設定を行う。

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

8.2.2 画面用コンポーネントを入れる views フォルダ

多くの Web アプリケーションは画面遷移によって変化する部分と変化しない部分に分かれる

シングルページアプリケーションでは、このように変化する部分んだけを JavaScript によってレンダリングしていく。
この変化する部分がルーティング表示領域であり、その表示領域にそれぞれのコンポーネントをあてはめることで画面が切り替わっていく仕組みとなる。

サンプルプロジェクト router-basic の画面用コンポーネント

これらのルーティング表示領域にレンダリングさせるコンポーネント（画面用コンポーネント）を入れておくフォルダが views フォルダである。

views フォルダ内にサブフォルダを作成してユースケースごとに画面用コンポーネントを分けておくこともできる。
ここでは表のように２～４は会員管理関連の画面なので member フォルダ内にまとめて入れておくことにする。