フロントエンド ルーティングは、ページ全体を更新せずに URL を変更するコア機能をどのように実装しますか?

フロントエンド ルーティングの核心は、ページを更新せずに URL を変更することです。具体的な実装方法:

1. URL ハッシュ

URL のハッシュはアンカー ポイント (#) であり、これは本質的に window.location の href 属性を変更します. location.hash を直接割り当てることで href を変更できますが、ページは更新されません.
注: ハッシュで変更された URL は # でマークされます
ここに画像の説明を挿入

2. HTML5 の履歴モード

履歴インターフェイスは HTML5 の新機能で、ページを更新せずに URL を変更する 5 つのモードがあります。

(1)history.pushState()

ここに画像の説明を挿入

このメソッドは、実際には履歴レコードを変更することであり、URL は直接 /xxx を増やします.次に、3 つのパラメーターがあり、最後の 1 つが URL です。これは、スタックをプッシュするようなものなので、前後に移動できます。(戻る、進む、およびその他の方法を使用して、前後に移動できます。)

  • コンソールで location.href = 'songsisi' を変更すると、ページ全体が更新されます。
  • location.hash = 'songsisi' で変更すると、ページが更新されません。
  • history.pushState({}, ' ', '/songsisi') を使用しても、何も更新されません。
  • history.pushState(); はスタック構造を使用しており、毎回プッシュされる URL はスタックの一番上にあります。history.back() を使用すると、スタックの一番上にある URL がスタックからポップされ、ブラウザーの URL アドレスが返されます。

(2)history.replaceState()

ここに画像の説明を挿入

これは pushState と同じですが、これには前方および後方の機能がありません。ブラウザはレコードを保存せず、元の URL をスタックにプッシュする代わりに直接上書きするため、戻ることができません。

(3) history.back() は history.go(-1) と同等です

ブラウザ インターフェースの back に相当
ここに画像の説明を挿入

(4) history.forward() は history.go(1) と同等です

ブラウザインターフェースの前方同等物
ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/Maybe_ss/article/details/122342898