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

[フォーカス]

　　歴史とハッシュルートの違い

ハッシュフロントエンドリフレッシュなし、ルーティング
履歴要求は、インターフェースに行きます

vue-router デフォルトのハッシュモード - ハッシュフルURLをシミュレートするためのURL、そのURLの変更、ページがリロードされません。

あなたはハッシュ醜いにしたくない場合は、我々は、ルーティングモードこのモデルの完全な使用履歴を使用することができます history.pushState ページをリロードすることなく、ジャンプを完了するために、APIのURLを。

あなたは、通常のURLとして履歴モード、URLを使用する場合、例えば http://yoursite.com/user/id、それもいいです！

しかし、このモードでは、あなたはよくプレーしたい、だけでなく、背景の設定をサポート。私たちのアプリケーションは、単一ページのクライアントアプリケーションであるため、バックグラウンドが正しい設定でない場合は、ユーザーが直接アクセスする際、ブラウザが http://oursite.com/user/id 良い見てない、404を返します。

URLは任意の静的リソースと一致した場合、あなたは同じ返す必要があります：だから、あなたはすべての状況をカバーするために、候補をサーバリソースを増やしたい index.html あなたのアプリページに依存しているページを。

。

[参考記事]

VUE-ルータ申し出理由の二つのモード：

VUEは、SPAを達成するために、システム（VUE-ルータ）ルーティング遠位端を導入する必要緩やか開発フレームワークである先端。コアフロントエンドルートです：ビューを変更すると後端にリクエストをすることはありません。

これを達成するために、ブラウザは、ハッシュと歴史のモードが用意されています。

ハッシュ：URLに存在するものの、ハッシュ、しかし、これハッシュを変更するとページをリロードしません、バックエンドには影響がありません、HTTPリクエストに含まれません。
歴史：pushState（）とreplaceState（）メソッドに新しいHTML5の歴史・インターフェースの使用履歴。ブラウザの履歴スタックに使用されるこれらの2つの方法、現在の既存のバックには、前方に、基礎を行く、彼らは歴史的な記録の修正機能を提供します。彼らは現在のURLの変更が、変更を実行しますが、ブラウザはすぐにバックエンドにリクエストを送信していない場合のみです。

そこで我々は、ハッシュパターンと履歴モデルは単にルーティングを達成するために、これらの2つの機能（ブラウザを呼び出すことによって提供されるインターフェイス）を使用し、ブラウザ自身の財産に属しVUE-ルータを言うことができます。

原則の実現：

原理ハッシュモードがonhashchangeイベントである、あなたは、ウィンドウオブジェクトでこのイベントをリッスンすることができます。
歴史：なhashchangeのみ（前進、バック、行く、pushState、replaceState）、後ろ履歴APIをコードするフラグメント＃を変更することができますが、ウィンドウオブジェクト（）イベントでpopStateを聞くことによって、完全な自由へのフロントエンドです

stateObj、タイトル、URL：pushState（）、replaceState（）メソッドは、3つのパラメータを受け入れます。

// 设置状态 
history.pushState（{色：" 赤" }、" 赤"、" 赤" ）。

// リスニング状態 
window.onpopstate =関数（イベント）{
    console.log（イベント.state）。
    もし（イベント .state && イベント .state.color === " 赤" ）{
        document.body.style.color = 「赤」。
    }
}

// 変更状態
history.back（）;
history.forward（）;

シナリオ：

ターゲット状態に保存されているページの状態によってPushStateは、ページのURL URLは当時、このように変更する場合、スライダーのページ位置として、ページの状態に復元することができ、この状態event.stateオブジェクトに取得することができ、位置、スイッチおよび他の構成要素を読み出します。

ハッシュの使用を介して通話history.pushState（）利点が存在します。

ハッシュ位の裏面のみ修飾部、こうしてのみURL URL現在のドキュメントを設け、URLはpushState相同URLに任意に設定することができます
新しい設定は、現在のURLとしてpushStateをURLことができ、それはまた、スタックにレコードを追加します。ハッシュ値の新しいセットは、オリジナルと同じにすることはできません、同じ値がトリガアクションがスタックにレコードを追加しません。
pushState stateObjectパラメータは、レコードに任意のデータ型によって添加してもよい。ハッシュは、短い文字列を追加することができ
pushState追加title属性は、その後の使用のために提供することができます

短所：

歴史ページを更新する際に該当するサーバの応答やリソースがない場合は、404が存在します。URLを静的リソースと一致する場合したがって、それはあなたのアプリページに依存している同じindex.htmlのページを返す必要があります
ハッシュモードでは、完全なカバレッジを達成するために何のルートが存在しない場合でも、バックエンドのための要求に含ま前の＃はhttpの内容だけでは、それは404を報告しません。

[第2条]

AJAXのより多くの大規模な使用では、フロントエンドのロジックページは、スパの特に上昇ますます複雑になった、フロントエンドルーティングシステムが一般的になってます。

ユーザの視点からは、メインルートのフロントエンドは、2つの機能（更新されたページのステータスAJAXを使用した場合）を達成するために：

（国家あなたが保存したり、現在のページのURLを共有し、再びURLを開く、Webのか、（株）保存）現在のページの状態を記録します。
あなたは（URLは前の状態に戻って、そのようなAJAX更新ページを使用してページ前の状態に戻るには、戻るボタンをクリックすると）、ブラウザの前後の機能を使用することができます。

開発者として、あなたはこれらの二つの機能を実現したい、私たちは何をする必要があります。

変更URLは、ブラウザがサーバにリクエストを送信することはできません。
URLの変更を監視します。
URLアドレスをキャプチャし、その情報を解析することは、ルーティングルールに一致するために必要。

私たちのルート一般的に使用されるハッシュパターンと歴史モデルは、実際に上記の機能を実現します。

ハッシュモード

ここでのハッシュは、URL尾後や文字の後ろに＃を指します。##とCSSが意味あるのはここです。呼ばれるハッシュ・アンカー自体は、可視表示領域に対応する要素の彼女ができ、ID、ページ登録のために使用されます。

ブラウザを起こさないハッシュ値の変更は、サーバーへの要求を行い、ハッシュ変更がなhashchangeイベントがトリガされますので、人々は基本的に達成するためにハッシュを使用して、HTML5の歴史の前に表示されますので、ブラウザに戻って、それを制御することができますルートのフロントエンド。

APIを使用するには：

window.location.hash = 'qq' // 设置 url 的 hash，会在当前url后加上 '#qq'

var hash = window.location.hash // '#qq' window.addEventListener('hashchange', function(){ // 监听hash变化，点击浏览器的前进后退会触发 })

履歴モード

IE8の互換性のあるパターンのハッシュとハッシュがなされてきた、歴史は私たちが前方にの歴史を置くべき理由IE10に互換性があることができますか？
ルーティングを行うために使用される場合はまず、ハッシュは、ページナビゲーションを作るために使用されている可能性が、本来のアンカー機能を使用することはできません。次に、複雑なデータを送信する場合、ハッシュは、URLの送信パラメータに基づいて、容積が制限され、入れ履歴モードURLパラメータだけでなくされ、データは、特定の被験体に格納されてもよいです。
最も重要な点：

あなたは醜いハッシュを使用しない場合、我々は、履歴モードルーティングを使用することができます
-ドキュメントvueRouterから引用します