はじめに
Vue Routerの基本とクライアントサイドルーティングについて学んだ内容をまとめています。基本や仕組みを理解することを重視したため、Vue Routerの設定方法やオプションは本記事には記載しておりません。
Vue RouterはVue公式のルーティングライブラリで、シングルページアプリケーション (以下SPA) のクライアントサイドルーティングを実現することができます。クライアントサイドルーティングは、SPAにおいてURLと表示するコンポーネントを対応させ、ページ全体を再読み込みせずにページ遷移を実現する仕組みです。
Vue Routerを理解するためには、まず「クライアントサイドルーティングとは何か」を理解することが重要です。この記事では、従来のサーバーサイドルーティングとの違いから、Vue Routerとクライアントサイドルーティングをまとめています。
この記事の対象者
- Vue Routerに入門する方
- Vue Routerの実装をしたが、設定内容の理解を深めたい方
- Vue Router公式ドキュメントに対する理解を深めたい方
サーバーサイドルーティング
従来のWebアプリケーションでは、URLごとにサーバーが表示するページを決定するサーバーサイドルーティングが一般的でした。サーバーサイドルーティングでは、ユーザーが別のページをクリックするたびにブラウザはサーバーへ通信を行い、HTMLやCSSを再取得してページ全体を再読み込みします。
例えばユーザーが /about へ移動すると、
ブラウザ
↓
リクエスト (GET /about)
↓
サーバー
↓
レスポンス (about.html)
↓
ブラウザ
↓
about.html を表示 (ページ全体を再読み込み)
という処理が行われます。サーバーは対応するHTMLを返し、ブラウザはページ全体を再読み込みしています。
クライアントサイドルーティング
クライアントサイドルーティングでは最初にアプリケーションを読み込み、その後のページ遷移はJavaScriptが担当します。
例えば /about へ移動しても、サーバーから新しいHTMLを取得することはありません。
リンクをクリック
↓
Vue Router
↓
URL変更
↓
対応するコンポーネントを表示
この仕組みをクライアントサイドルーティングと呼びます。また、この仕組みを担うのがVue Routerです。
Vue Routerの基本構成
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
component: HomeView,
},
{
path: '/about',
component: AboutView,
},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
routes、createRouter、createWebHistoryといった要素が登場しました。これらの要素についてご説明します。
routes
routes ではURLとコンポーネントの対応関係を定義します。
const routes = [
{
path: '/',
component: HomeView,
},
{
path: '/about',
component: AboutView,
},
]
例えば、/about にアクセスすると AboutView が表示されるといった対応関係を定義しています。
createRouter
createRouter は、Vue Router全体の設定をまとめたRouterインスタンスを作成する関数です。
const router = createRouter({
history: createWebHistory(),
routes,
})
設定のうち、routesは上記で定義したURLとコンポーネントの対応関係です。では、createWebHistory とはなんでしょうか？ここからは、このHistoryモードに関する設定を見ていきます。
Historyモード
Historyモードとは
createRouterを利用してRouterインスタンスを作成する際は、ルーティングの履歴管理方式 (Historyモード) を選択します。
通常、ブラウザの履歴はページ遷移によって自動で追加されます。例えば、以下のようにサーバーサイドルーティングでページ遷移をすると、
/home → /about → /profile
ブラウザはこの順番で履歴を保存します。そのため、ブラウザの「戻る」ボタンを押すと、
/profile → /about
のように前のページへ戻ることができます。
他方で、SPAのクライアントサイドルーティングでは、ページ遷移時にサーバーから新しいHTMLを取得しません。JavaScriptで表示するコンポーネントを切り替えるだけでは、ブラウザのURLや履歴は自動では更新されません。
そこでVue Routerでは、ブラウザが提供するHistory APIやメモリ上の履歴を利用して、URLや履歴を管理します。これらの履歴管理方式をHistoryモードと呼び、createRouterでRouterインスタンスを作成する際にHistoryモードの選択を行います。
ここからは、Vue Routerで利用できる代表的なHistoryモードを見ていきます。
createWebHistory
createWebHistory()
createWebHistory は、ブラウザのHistory APIを利用して、# を含まないURLでルーティングを行う方式です。History APIとは、ブラウザが持つ履歴機能をJavaScriptから操作するためのAPIです。これを利用することで、ページ全体を再読み込みすることなくURLや履歴を更新できます。
履歴は次のようになります。
/home → /about → /profile
サーバーサイドルーティングのときと同様に、履歴が積まれます。通常のWebサイトと同じような自然なURLになります。
ただし、createWebHistory を利用する場合は、サーバー側でフォールバック設定を行う必要があります。
クライアントサイドルーティングによるページ遷移では、JavaScriptがURLと表示するコンポーネントを切り替えるため、ページ全体の再読み込みは発生しません。
しかし、ブラウザをリロードした場合や、URLを直接開いた場合は、通常のWebページと同じようにサーバーへリクエストが送信されます。
例えば現在のURLが /about だったとします。ここでブラウザをリロードすると、ブラウザはサーバーへ次のようなリクエストを送ります。
GET /about
SPAでは /about というHTMLファイルが実際に存在するわけではなく、多くの場合は index.html のみが存在します。
そのため、サーバー側で特別な設定をしていないと、
404 Not Found
になってしまいます。この問題を防ぐため、SPAではどのURLへアクセスされても index.html を返すようにサーバーを設定します。
GET /about
↓
index.html を返す
↓
Vue Router が起動する
↓
現在のURLを解析する
↓
AboutView を表示する
このように、存在しないパスへアクセスされた場合でも index.html を返す設定を、フォールバック設定と呼ぶことがあります。
createWebHashHistory
createWebHashHistory()
createWebHashHistory は、URLのハッシュ（#）部分を利用してルーティングを行う方式です。ハッシュ部分の変更はサーバーへ送信されませんが、ブラウザの履歴には追加されます。そのため、サーバーへ新しいHTMLをリクエストすることなく、戻る・進むボタンに対応したページ遷移を実現できます。
履歴は次のようになります。
/#/home → /#/about
# 以降はサーバーへ送信されません。
例えば次のURLをブラウザで開いた場合、
https://example.com/#/about
サーバーへ送信されるリクエストは、
GET /
↓
index.html
↓
Vue Router
↓
#/about
↓
AboutView
となります。そのため、サーバーは /about を解決する必要がなく、createWebHistory のようなフォールバック設定も不要です。他方で、URLに # が含まれるため、見た目は少し不自然になります。
createMemoryHistory
createMemoryHistory()
createMemoryHistory は、ブラウザのURLとは連動せず、メモリ上で履歴を管理する方式です。
ページ遷移を行っても、ブラウザのアドレスバーに表示されるURLは変更されません。また、ブラウザの戻る・進むボタンとも連動しません。そのため、通常のブラウザ向けSPAでは利用されることは少なく、主にサーバーサイドレンダリングやテストなどで利用されます。
ページ表示とページ遷移の設定
RouterView
RouterView は現在のURLに対応するコンポーネントを表示する役割を持っています。通常は App.vue に RouterView を配置します。
<!-- App.vue -->
<template>
<RouterView />
</template>
この場合、現在のURLに対応するコンポーネントがRouterViewに表示されます。
例えば、現在のURLが/aboutの場合は次のような構造になります。
App.vue
└─ RouterView
└─ AboutView
通常のルート構成であれば、App.vue の RouterView に現在のURLに対応するコンポーネントが表示されます。
RouterLink
ページ遷移には RouterLink を利用します。
<RouterLink to="/about">
About
</RouterLink>
RouterLink は <a> タグと同様にリンクとして利用できます。クリックするとVue RouterがURLを更新し、現在のURLに対応するコンポーネントへ切り替えます。サーバーへの通信やページの再読み込みは発生しません。
まとめ
- クライアントサイドルーティングでは、ページ遷移時にサーバーから新しいHTMLを取得しない
- Vue Routerはクライアントサイドルーティングを実現するライブラリ
- HistoryモードによってURLの管理方法を選択できる
-
createWebHistoryを利用する場合は、サーバー側でフォールバック設定が必要 -
RouterViewが現在のURLに対応するコンポーネントを表示する -
RouterLinkを利用してページ遷移を行う
他にも、Vue Routerにはオプションとして利用できる便利な機能がありますので、ぜひ公式ドキュメントもご活用いただけると幸いです。