vue-routerのhashモードとhistoryモードをざっくりと理解することが目的の記事です。
そもそもルーターはなんで必要？SPAについて少し補足
これはVueに限った話ではないですが、ルーターの役割は（簡単に）SPAを実現するためと言っても良いでしょう。
SPAとは
最初のリクエストで受け取ったHTML（index.html）を使いまわし、URLに対応したページをJavaScriptで動的に作成する方式です。
MPAとは
SPA対してMPA（マルチページアプリケーション）と呼ばれたりします。
URLに対応したHTMLをサーバーが返してくれる従来の方式です。
hashモード
hashモードではURLが下記のように表示されます。
http://localhost:8080/#/hoge
ルーティングにURL hashを使用しています。
この形式で入力されるとvue-routerは、
urlの # を見つけてそれより先の文字列を元に動的にコンポーネントを出し分けます。
また、サーバへの通信が発生しない分historyモードより若干早いです。
メリット
- 設定が簡単
- historyモードより早い
- HTML5 History API をサポートしていないブラウザで動く
注意点
- URLに
＃が入ってしまう
historyモード
historyモードではURLが下記のように表示されます。
http://localhost:8080/hoge
historyモードではlocalhostにリクエストを送信する際は、ローカルサーバがindex.htmlを返すようになっています。
ホスティングサービスを利用する際は、index.htmlを返すように設定しなければならないので注意が必要です。
メリット
- URLに
＃が入らない。
注意点
- サーバへの通信が発生する
- 設定が必要 ※設定例はこちら
- HTML5 History API をサポートしていないブラウザで動かない
まとめ
vue-routerには二種類のモードがありますが、用途によって使い分けができます。
てか、HTML5 History APIをサポートしていないブラウザで動かそうなんて思わないからデメリットじゃない。
historyモードを使う際は、初心者がハマりがちな設定が必要なことを注意したいですね！
| hashモード | historyモード | |
|---|---|---|
| パスの形式 | http://localhost:8080/#/hoge |
http://localhost:8080/hoge |
| メリット | 設定が簡単 historyモードより早い HTML5 History API不要 |
URLに＃が入らない |
| 注意点 | URLに＃が入る |
サーバへの通信が発生する サーバの設定が必要 HTML5 History API必要 |