Vue Routerを使ってみた

Vue Router とは

Vue.js で SPA を作る際に、ルーティング制御を行うのに便利なプラグインです。

インストール

Vue CLI が利用可能な場合には、vue create 時に選択することで、組み込むことができます。
もしくは、vue create でプロジェクトを作成後、下記のように組み込むことも可能です。

例：プロジェクト名を test4 とした場合

% vue create test4
% cd test4
% vue add router

history モード

Vue Router を組み込んだ際に、下記のような選択を求められます。

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

これは、history モードを使うかどうかという選択肢ですが、使わない場合には hash モードが使われます。
history モードと hash モードの違いは、URL の組み立てについてです。
hash モードは SPA のデフォルトである hash(#) を使う方法です。
history モードは、通常の URL と同様に path を使って URL を組み立て、SPA なのでこれをページのロードなしに URL 遷移することを可能にするモードです。

ただし、history モードはあくまでも Vue.js で対応する機能なので、直接 Vue Router で対応させた URL をブラウザなどから参照されてしまった際には、サーバで処理しようとしてしまいますので対応できません。
この問題には、サーバ側で Vue Router で対応している URL にアクセスされた場合に、Vue.js の HTML を参照させるような設定を入れておくことで対応することが可能です。

上記の１つの設定例としては、多くのフレームワークや WordPress などのアプリケーションでよく設定するように、静的ファイルにマッチしなかった場合に Vue.js の HTML を参照させるという下記のような Apache の設定が考えられます。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

その他、詳細は下記の公式ドキュメントに記載があります。https://router.vuejs.org/ja/guide/essentials/history-mode.html

使い方

上記で Vue Router を組み込んだ後、npm run serve で参照できるサンプル画面が Vue Router が対応されたものになっています。
従って、まずはサンプル画面を動かしてみて確認してみましょう。
関連ファイルを見てみれば、簡単な使い方はすぐにわかると思います。