vue-router のハッシュ モードとヒストリー モードの違いの分析

この記事は、vue-router のハッシュ モードとヒストリー モードの違いの分析を共有するもので、困っている人はぜひ参考にしてください。

ご存知のとおり、vue-router にはハッシュ モードとヒストリー モードの 2 つのモードがあります。この 2 つの違いについて説明します。

ハッシュ モード

ハッシュ モードの背後にある原理は、window オブジェクトで監視できる onhashchange イベントです:

window.onhashchange = function(event){
  console.log(event.oldURL, event.newURL);
  let hash = location.hash.slice(1);
  document.body.style.color = hash;
}

上記のコードは、ハッシュを変更することでページのフォントの色を変更できますが、役に立たないが、原理はある程度説明できる。

さらに重要な点は、ハッシュが変更された URL がブラウザーによって記録されるため、ブラウザーの「進む」と「戻る」が使用できることがわかり、「戻る」をクリックするとページのフォントの色も変わります。このように、ブラウザはサーバーに要求しませんでしたが、ページのステータスが 1 つずつ URL に関連付けられるようになり、後にフロントエンド ルーティングという横暴な名前が付けられ、シングルページ アプリケーションの標準的な構成になりました。 。

NetEase Cloud Music と Baidu Netdisk は次のようなハッシュ ルーティングを使用します:
http://music.163.com/#/friend

https://pan.baidu.com/disk/home# list/vmode=list

履歴ルーティング

履歴 API の登場により、フロントエンド ルーティングが進化し始めました。以前のハッシュ変更では、# 以降の URL フラグメントのみを変更できましたが、履歴 API では前部分が変更されました。無料の

履歴 API は、切り替えと変更の 2 つの部分に分けることができます。MDN を参照してください。

履歴ステータスの切り替え

には、back、forward、go の 3 つのメソッドが含まれており、それぞれに対応します。ブラウザの「進む」と「戻る」の操作については、（Google の）ブラウザには「進む」と「戻る」だけがあり、ジャンプはないと言う人もいました。「進む」ボタンと「戻る」ボタンを押し続けると、現在のすべてのウィンドウの履歴が表示されるので、ジャンプすることができます (ジャンプと呼ぶ方が適切かもしれません):

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

履歴状態を変更します

には、pushState と replaceState という 2 つのメソッドが含まれています。これらの 2 つのメソッドは、3 つのパラメータを受け取ります。 stateObj、title、url

history.pushState({color:'red'}, 'red', 'red'})
window.onpopstate = function(event){
  console.log(event.state)
  if(event.state && event.state.color === 'red'){
    document.body.style.color = 'red';
  }
}
history.back();
history.forward();

を介してpushstate ページの状態をstateオブジェクトに保存します。ページのURLがこのURLに戻ると、event.stateを通じてこの状態オブジェクトを取得できます。ここでのページ状態はページのフォントの色であり、実際にはスクロールバーの位置、読み取りの進行状況、コンポーネントの切り替えをすべて状態に保存できます。

履歴モードで何を恐れていますか

履歴 API を通じて、醜い # を失いましたが、問題もあります:

私たちは進むことや戻ることを恐れているのではなく、リフレッシュすることを恐れています、f5、(バックエンドが準備されていない場合)、更新は仮想ではなくサーバーに対する実際のリクエストであるためです。

ハッシュ モードでは、フロントエンド ルーティングが # の情報を変更し、リクエスト時にブラウザがそれを操作しないため問題はありませんが、履歴の場合は、更新時にパスを自由に変更できます。サーバー内に対応する応答またはリソースがない場合、404 が毎分生成されます。

したがって、github.io で単一ページのブログを構築したい場合は、ハッシュ モードを選択する必要があります。

関連する推奨事項:

vue でトークンを更新する方法

Vue での SFC と vue-loader の詳細な分析

以上がvue-router のハッシュ モードとヒストリー モードの違いの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。