フロントエンド ルーティングの核心は、ページを更新せずに 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) と同等です
ブラウザインターフェースの前方同等物