ハッシュVUE-ルータモードと歴史の違い

なぜハッシュと歴史なければなりません

SPA（単一ページのアプリケーション）を構築するために、Vueのための漸進的なフロントエンドの開発フレームワーク、このタイプのために、存在ヴュー・ルータの意味であるフロントエンドルーティングシステムを、導入する必要があります。コアフロントエンドルート、ということである - バックエンドに閲覧要求を変更しないいます。

これを達成するために、ブラウザは、現在、以下の二つのサポートを提供します：

• ハッシュ - 、＃記号のURLアドレスバー（これはハッシュ操作で暗号化ハッシュではありません）です。たとえば、このURLます。http：＃の//www.abc.com/#/hello,hash値/こんにちは。URLに存在するものの、ハッシュが、HTTPリクエストに含まれることはありません、バックエンドには影響がない、ので、ハッシュを変更するとページをリロードしません：それは、ことを特徴としています。
• 歴史 - pushState（）とreplaceState（）メソッドにHTML5の歴史のインターフェイスで新しいを使用。彼らは歴史を修正するための機能を提供し、ブラウザの履歴スタックに使用されるこれらの2つの方法、順方向電流の既存のバック、トップ上の基礎行く（特定のブラウザのサポートが必要です）。彼らは現在のURLの変更が、変更を実行しますが、ブラウザはすぐにバックエンドにリクエストを送信していない場合のみです。

そこで我々は、独自のブラウザ機能に属しハッシュパターンと履歴モデル、ヴュー・ルーターがちょうどフロントエンドのルートを達成するために、これらの2つの機能（ブラウザを呼び出すことによって提供されるインターフェイス）を使用し、言うことができます。

利用シナリオ

あなたはより多くの色の値について気にしない限り、一般的なシナリオでは、ハッシュと歴史の中で、URLを含めることで＃記号はやや美しく見えるんことができます。

あなたはハッシュ醜いにしたくない場合は、我々はページをリロードすることなく、ジャンプを完了するには、ルーティングモードhistory.pushState API URLのこのモデルのテイク利点を履歴を使用することができます。 - ヴュー・ルータの公式サイト。

また、Mozillaがネットワークを開発導入するために応じて、（history.pushStateを呼び出して）直接ハッシュ、以下の利点を変更するために比べ。

• 現在のURLを新しいURL pushState（）セットは、同種任意のURLすることができ、かつ、ハッシュ＃のみリアセクションを変更することができ、あなただけの文書のURLで現在のURLを設定することができます。

• pushState（）新しいURLが現在のURLと正確に同じにすることができ、それはまた、スタックにレコードを追加します設定すると、新たなハッシュ値は、アクションがスタックにレコードを追加しますトリガするために同じではない、オリジナルで設定する必要があります。

• pushStateに（）stateObjectによって記録パラメータに任意のタイプのデータに追加することができ、かつ短い文字列のハッシュを追加します。

• pushState（）に加えて、その後の使用のためのタイトル属性を設けてもよいです。

もちろん、歴史はすべてが良いですされていません。あなたが本当にURLからバックエンドにHTTP要求を開始したい場合は、ブラウザでの能力もののSPA、しかし、2つの違いは来ました。特に、ユーザの後に手動でブラウザの時間を入力するか、リフレッシュ（再起動）URLを入力してください。

• ハッシュモードは、コンテンツの前にのみハッシュシンボルは、後端に、完全なカバレッジを達成するために何のルートがない場合でも、404を返さない、例えばhttp://www.abc.comなどの要求に含まれていますエラー。

• 履歴モード、URLとURLのフロントエンドは、http://www.abc.com/book/idとして実際の一貫性、後端に要求を開始しなければなりません。/書籍/ ID経路処理のバックエンドの欠如は、404エラーを返す場合。

  そのような記述でヴュー・ルータの公式サイト：「しかし、あなたはうまくプレーしたい、このモードではなく、背景の設定サポート......だから、あなたはサービス側ですべての状況をカバーするために候補リソースを追加したい：URLは任意の静的リソースと一致する場合、あなたのアプリページに依存している同じindex.htmlのページを返す必要があります。」

履歴モードの設定nginxの

展開のnginxのルートディレクトリ：

nginxのサーバーのデフォルトのディレクトリは、あなたがローカルディレクトリにdistのディレクトリ内の静的ファイルをアップロードする必要が/ nginxの/ htmlのを/ usr / shareです。

で/etc/nginx/conf.d下の検索default.conf設定ファイルは、次の設定を追加することができます。

location / {
  root   /usr/share/nginx/html;
  index  index.html index.htm;
  try_files $uri $uri/ /index.html; // 后端配置
}

概要

独自の例としては、一般的なヴュー+ヴュー、ルータ+のWebPACK + XXXのWebフォームの開発シナリオでは、404のルートの前端ながら、履歴モード、のみ後端（Apacheまたはnginxの）単純なルーティング構成を使用することができページのサポート。

マイクロチャネルパブリック番号懸念スキャンコード、より良い通信