jsはどのようにモニターURLの変化を更新しませんか?

更新なしでルーティングを変更する2つの方法
hashでルートを変更します.
コード

window.location.hash='edit'

効果

http://xxxx/#edit

historyでルートを変更します.

history.back():ブラウザセッション履歴の前のページに戻り、ブラウザのキャンセルボタン機能と同じ

history.forward():ブラウザセッション履歴の次のページを指し、ブラウザの進行ボタンと同じ

を指す.

history.go():ブラウザセッション履歴で指定された記録ページ

にジャンプできます.

history.pusState()は、与えられたデータをブラウザセッション履歴スタックに押し込むことができ、この方法は3つのパラメータ、オブジェクト、title、および一連のurlを受信する.pusshState後は現在のページurl

を変更します.

history.replacceState()は現在のセッションページのurlを指定データに置き換え、replacceState後も現在のページのurl

を変更します.
モニターurl変化
hashの変化を傍受する
hashによってurlが変わり、hashchangeイベントが発生します.hash changeイベントをモニターするだけで、shによってurlが変わる行為が捕獲されます.

window.onhashchange=function(event){
  console.log(event);
}
//  
window.addEventListener('hashchange',function(event){
   console.log(event);
})

back/forward/goを傍受します.
history.back()であれば、history.forward()、history.go()は、popstate事件をトリガします.

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

しかし、history.pusState()とhistory.replacceState()は、popstateイベントをトリガしないので、自分でイベントを増やす必要があります.
pusshState/replace Stateをモニターする
history.replace Stateとpustateはpopstate事件をトリガしません.この二つの行為をどう監督しますか?方法の中でアクティブにpopstate事件を触発することができます.もう一つは方法で新たなグローバルイベントを作成することです.

改造

const _historyWrap = function(type) {
  const orig = history[type];
  const e = new Event(type);
  return function() {
    const rv = orig.apply(this, arguments);
    e.arguments = arguments;
    window.dispatchEvent(e);
    return rv;
  };
};
history.pushState = _historyWrap('pushState');
history.replaceState = _historyWrap('replaceState');

傍受

window.addEventListener('pushState', function(e) {
  console.log('change pushState');
});
window.addEventListener('replaceState', function(e) {
  console.log('change replaceState');
});