原生js监听history路由变化

在JavaScript中，监听浏览器历史路由变化通常使用的是`window.addEventListener('popstate', callback)`方法。`popstate`事件会在用户点击浏览器的前进或后退按钮、或者手动修改URL（如在地址栏输入新的URL）时触发。

以下是一个简单的示例：

// 历史记录监听器
window.addEventListener('popstate', function(event) {
  // event对象包含了有关此次导航更改的信息
  console.log('页面发生了变化:', event);

  // 在这里处理路由变化的逻辑，例如更新UI或者执行其他操作
  var newURL = window.location.href;
  console.log('新的URL: ', newURL);
});

// 当需要更新路由时，可以通过replaceState或pushState方法手动触发
// 如：history.pushState(null, null, '/new-url');

记得，`pushState`和`replaceState`方法也可以用来改变URL和浏览器历史记录，但它们不会触发`popstate`事件。如果你需要这种方式来改变状态并立即触发事件，你可以手动调用`event.replaceState`或`event.pushState`。