記事のディレクトリ
1つ、ハッシュモード
URLのハッシュは、次のURLのようにアンカー（＃）でもあります：http：//www.abc.com/#/hello、ハッシュの値は＃/ helloです。その特徴は次のとおりです。ハッシュはURLに表示されますが、HTTPリクエストには含まれず、バックエンドには影響しません。したがって、ハッシュを変更してもページは再読み込みされません。
ハッシュ値を変更してもブラウザはサーバーにリクエストを送信せず、ハッシュを変更するとハッシュ変更イベントがトリガーされるため、ブラウザはブラウザの前後の動きを制御することもできます。フロントエンドがhttpリクエストを開始しなくても、対応するページを見つけることができます。コードブロックはオンデマンドでロードされます。したがって、html5の歴史が出現する前は、人々は基本的にハッシュを使用してフロントエンドルーティングを実装していました。
第二に、HTML5の履歴モード
historyインターフェイスはHTML5の新機能であり、window.history属性は現在のウィンドウの閲覧履歴を表す履歴オブジェクトを指します。ブラウザのツールバーの「進む」ボタンと「戻る」ボタンは、実際には履歴オブジェクトを操作します。
履歴オブジェクトは、現在のウィンドウがアクセスしたすべてのページのURLを保存します。次のコードは、現在のウィンドウで3つのURLにアクセスしたことを示しています。
履歴オブジェクトには2つの主要な属性があります。
history.length：現在のウィンドウ（現在のページを含む）でアクセスされたURLの数history.state：履歴スタックの最上位の状態値
// 当前窗口访问过多少个网页
window.history.length // 1
// history 对象的当前状态
// 通常是 undefined，即未设置
window.history.state // undefined
セキュリティ上の理由から、ブラウザはスクリプトがこれらのアドレスを読み取ることを許可していませんが、アドレス間のナビゲーションは許可しています。ページを更新せずにURLを変更する履歴には5つの方法があります
1、history.pushState（state、title、url）
履歴レコードをブラウザに追加しますが、現在のページは更新されません（リロードされません）。ブラウザの戻るボタンをクリックして前のページに戻ることができます。
state：追加されたレコードに関連付けられた状態オブジェクト。主にpopstateイベントに使用されます。title：新しいページのタイトル。ただし、すべてのブラウザがこのパラメータを無視するようになったため、ここに空白の文字列を入力できます。url：新しいURLは、現在のページと同じドメインにある必要があります。ブラウザのアドレスバーにこのURLが表示されます。
2、history.replaceState（state、title、url）
現在のブラウザの履歴を変更します。つまり、現在このコードを実行しているページのレコードを置き換えます。ブラウザの[戻る]ボタンをクリックして前のページに戻ることはできません。
3、history.back（）、history.forward（）、history.go（）
これらの3つの方法は、履歴を移動するために使用されます。
history.back()：前のURLに移動します。これは、ブラウザの[戻る]ボタンをクリックするのと同じです。最初にアクセスしたURLの場合、この方法は効果がありません。history.forward()：次のURLに移動します。これは、ブラウザの進むボタンをクリックするのと同じです。最後にアクセスしたURLの場合、この方法は効果がありません。history.go()：整数をパラメータとして受け入れ、現在のURLに基づいてパラメータで指定されたURLに移動します。たとえば、go（1）はforward（）と同等であり、go（-1）はback（）と同等です。パラメータが実際のURL範囲を超えている場合、この方法は効果がありません。パラメータが指定されていない場合、デフォルトのパラメータは0です。これは、現在のページを更新することと同じです。
以前にアクセスしたページに移動する場合、ページは通常、サーバーに新しいページの送信を要求するのではなく、ブラウザのキャッシュから読み込まれることに注意してください。
pushState（）とreplaceState（）の機能は、ページを更新せずにURLを置き換えることです。これは、犬の肉を販売するようなものです。HTTPは、このパスでサーバーのリソースを要求しません。更新されると、この実際の障害が明らかになります。 。既存の「羊の頭」、ディスプレイ404（ブラウザが更新されると、実際にサーバーリソースを要求するため）
では、履歴モードで404を更新することの欠点を解決するにはどうすればよいですか？これには、存在しないパス要求をエントリファイル（index.html）にリダイレクトするバックエンドのサポートが必要であり、フロントエンドとバックエンドが連携して機能します。
pushStateメソッドとreplaceStateメソッドは、履歴オブジェクトを変更するだけで、現在のアドレスバーのURLを変更できますが、ブラウザーはバックエンドにリクエストを送信せず、popstateイベントの実行をトリガーしません。
三、違い
一般的なシナリオでは、ハッシュと履歴の両方を使用できますが、外観を気にしない限り、URLに混在する＃記号は見栄えがよくありません。
醜いハッシュが必要ない場合は、ルーティングの履歴モードを使用できます。履歴モードでは、ページが更新されたときに、サーバーに対応する応答またはリソースがない場合、404が表示されます。したがって、URLが静的リソースと一致しない場合は、アプリが依存するページである同じindex.htmlページを返す必要があります。
4、情報
履歴オブジェクト-JavaScriptチュートリアル-MgSO道