LoginSignup
69
57

More than 3 years have passed since last update.

[Vue.js] vue-routerのhashモードとhistoryモードの違いをざっくり理解する

Last updated at Posted at 2020-03-08

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必要

参考

69
57
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
69
57