フロントエンド開発における履歴ルーティングとハッシュルーティングの選択

1.フロントエンドルーティングがあるのはなぜですか。

Vueなどのプログレッシブフロントエンド開発フレームワークの場合、SPA（シングルページアプリケーション）を構築するには、フロントエンドルーティングシステムを導入する必要があります。これがVue-Routerの意味です。フロントエンドルーティングの中核は、バックエンドにリクエストを送信せずにビューを変更することにあります。

利点：
優れたユーザーエクスペリエンス、より便利なユーザー操作、
完全なフロントエンドコンポーネント化

短所：
初めて多くのリソースをロードする->解決策：
オンデマンドでロードするSEOに不向き->解決策：サーバー側のレンダリングnuxt
機能：異なるリクエストがある場合、異なるコンポーネントが同じページにレンダリングされる
原則：フロントエンドとバックエンドが分離されています（バックエンドはデータに重点を置き、フロントエンドは対話と視覚化に重点を置きます）+フロントエンドルーティング

2.ブラウザは現在2つのルートを提供しています。

hash-アドレスバーのURLにある＃記号（このハッシュは暗号化のハッシュ操作ではありません）。たとえば、次の
URL：http：//www.abc.com/#/hello、ハッシュの値は＃/ helloです。その特徴は、ハッシュはURL
に表示されますが、HTTPリクエストには含まれず、バックエンドに影響を与えないことです。したがって、ハッシュを変更してもページは再読み込みされません。

Hash 路由（也就是锚点#），本质是是改变location的hash属性
利用 URL 上的 hash，当 hash 改变不会引起页面刷新，可以触发相应的 hashchange 回调函数配置路由（VueRouter会自动监听）

 window.onhashchange = function() {
    
    
   //更新页面内容
   document.getElementById("demo").innerHTML = x  
   ......
}

history-HTML5 History Interfaceの新しいpushState
（）メソッドとreplaceState（）メソッドを利用します。（特定のブラウザサポートが必要です）これらの2つの方法は、ブラウザの履歴スタックに適用されます。現在存在する
戻る、進む、および移動に基づいて、履歴を変更する機能を提供します。変更を実行すると、現在の
URLは変更されますが、ブラウザはすぐにバックエンドにリクエストを送信しません。

本质是通过h5新增的history.pushState({
    
    },'','/home')或history.replaceState({
    
    },'','/home')改变路径

pushState()、replaceState() 方法接收三个参数：stateObj、title、url

history.pushState({
    
    color: "red"}, "red", "red") //设置状态
window.onpopstate = function(event) {
    
     //监听状态
  if(event.state && event.state.color === "red") {
    
    
    document.body.style.color = "red"  //更新页面内容
  }
}

したがって、ハッシュモードと履歴モードはどちらもブラウザ自体の特性に属し、Vue-Routerはこれら2つの特性（ブラウザが提供するインターフェイスを呼び出すことによる）のみを使用してフロントエンドルーティングを実装していると言えます。

3.使用シナリオ

一般的なシナリオでは、ハッシュと履歴の両方を使用できますが、外観を気にしない限り、URLに混在する＃記号は見栄えがよくありません。
非常に醜いハッシュが必要ない場合は、ルーティング履歴モードを使用できます。このモードでは、history.pushState APIを最大限に活用して
、ページをリロードせずにURLジャンプを完了します。-Vue-routerの公式ウェブサイト。
さらに、Mozilla Develop Networkの導入によると、history.pushState（）を呼び出すことには、ハッシュを直接変更するよりも次の利点があります。

pushState（）によって設定される新しいURLは、現在のURLと同じ任意のURLにすることができます。ハッシュは＃の
後の部分のみを変更できるため、現在のURLと同じドキュメントのURLのみを設定できます。
pushState（）によって設定された新しいURLは、現在のURLとまったく同じにすることができます。これにより、レコードもスタックに追加
されます。レコードを追加するアクションをトリガーするには、ハッシュによって設定された新しい値が元の値と異なる必要があります。スタックに;
pushState（）は、stateObjectパラメーターを介して任意のタイプのデータをレコードに追加できますが、ハッシュは短い文字列のみを追加できます。
pushState（）は、後で使用するためにtitle属性を追加で設定できます。
もちろん、歴史はすべてにおいて良いわけではありません。SPAはブラウザで適切に機能しますが、URLを介してバックエンドへのHTTPリクエストを実際に開始したい場合は、2つの違いがあります。特に、ユーザーが手動でURLを入力してEnterキーを押すか、ブラウザーを更新（再起動）する場合。

ハッシュモードでは、http：//www.abc.comなど、ハッシュ記号の前のコンテンツのみがリクエストに含まれるため、バックエンドの場合、ルーティングが完全にカバーされていなくても、404エラーは返されません。。

履歴モードでは、フロントエンドURLは、
http：//www.abc.com/book/idなどのバックエンドURLへの実際のリクエストと一致している必要があります。バックエンドに/ book / idのルーティング処理がない場合、404エラーが返されます。
Vue-Routerの
公式ウェブサイトでは次のように説明しています。「ただし、このモードは適切に再生する必要があり、バックグラウンド構成のサポートが必要です。..したがって、サーバー側のすべての状況をカバーする候補リソースを追加する必要があります。URLの場合
静的リソースと一致しません。アプリが依存しているページである同じindex.htmlページを返す必要があります。」