ルーティングのジャンプを徹底的に理解する:locationとhistoryインタフェース

単一ページアプリケーションでは、通常、フロントエンドによってルーティングが構成され、urlによって異なるコンテンツが表示されます.これがどのように行われているかを知るには、まずブラウザが提供する2つのAPIを理解する必要があります.

window.location

location.href

location.hash

location.search

location.pathname

window.history

history.pushState()

history.replaceState()

history.go()

history.back()

history.forward()

window.location
まずlocationオブジェクトについて説明します.locationには多くの属性があります.プロパティ値を変更することで、ページのurlを変更できます.単一ページアプリケーションで必要なのはurlを変更してページをリフレッシュしないことです.locationインタフェースでは、次の2つの方法があります.

location.href賦値時urlのhash

のみ変更

直接付与location.hash

上記の残りの2つの属性location.searchは、ページを直接リフレッシュします.これは説明しません.ただしlocation.pathnamehashのみを変更することは可能であるはずですが、実際にはブラウザがこの属性値を符号化するので、#番号の値を直接付与することはできません.
window.history
historyインタフェースはHTML 5に追加され、ページをリフレッシュせずにurlを変更する5つの方法があります.

history.pushState()

history.replaceState()

history.go()

history.back()はhistory.go(-1)に等価であり、history.forward()はhistory.go(1)に等価であり、この3つのインタフェースはブラウザインタフェースの前進後退に等しいため、上記の3つの方法のみを実証した.
urlの変化を監視する方法
ページをリフレッシュせずにページのurlを変更する方法を知っています.ページはリフレッシュされていませんが、ページに表示される内容を変更します.これはjsがurlの変化を監視して私たちの目的を達成する必要があります.
urlの変更を傍受できる2つのイベントがあります.
hashchange hashchangeイベントはurl hashの変更を傍受することができる.
まず、イベントリスニングのコードを追加します.

window.addEventListener('hashchange', function(e) {
  console.log(e)
})

そしてページのconsoleで楽しい実験ができます.
上図から,locationインタフェースによってhashを直接変更してもhistoryインタフェースによって前進後退しても(hashが変更された場合だけ)url hashの変更を傍受できることが分かる.しかし、この事件もurl hashの変化を傍受するしかない.より強力なイベントが必要です.popstateです.
popstate
popstateイベントは、history.pushState()およびhistory.replaceState()を除くurlの変化を傍受することができる.
イベントリスニングのコードを追加します.

window.addEventListener('popstate', function(e) {
  console.log(e)
})

そしてまたページのconsoleで楽しい実験ができます.
実はhistory.pushState()とhistory.replaceState()のurlに対する変更はpopstateイベントをトリガーしないだけでなく、この2つの方法がurl hashだけを変更する場合もhashchangeイベントをトリガーしない.
hashモードとhistoryモード
単一ページアプリケーションのルーティングにはhashとhistoryの2つのモードがあることを知っています.hashモードでhistory.pushState()およびhistory.replaceState()メソッドを使用しない場合は、hashchangeイベントコールバックでurl変更時の論理を記述するだけでよい.一方、historyモードでは、popstateイベントコールバックでurlの変化を処理するだけでなく、history.pushState()メソッドとhistory.replaceState()メソッドでurlの変化を処理する必要があります.またhistoryモードではバックエンドの協力が必要です.そうしないと、ユーザーがページをリフレッシュするのは404しか見られませんか?
だからhashモードでは私たちの仕事は実はもっと簡単ですが、どうして今historyモードをお勧めしますか?いつもhashモードのurlが醜いのではありませんて、結局これは顔を見る世界ですか?
しかしvue-routerブラウザがpushState()をサポートしている場合、hashモードでもhistory.pushState()でurlを変更していますが、何か意味がありますか?まだ研究が必要だ...