SPA 路由原理

发表于 2017-08-25 更新于 2022-04-24 本文字数： 518 阅读时长 ≈ 1 分钟

hash

监听 hashchange 事件。

window.addEventListener('hashchange', function() {
  console.log(window.location.hash);
});

history

使用 History API。

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

popstate 事件在 history 改变时触发，调用 history.pushState() 创建新的历史项，或调用 history.replaceState() 替换新的历史项，那么 popstate 事件的 state 属性会包含历史项状态对象(state object)的拷贝(event.state)。

需要注意的是调用 history.pushState() 或 history.replaceState() 不会触发 popstate 事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在 Javascript 代码中调用history.back()）。