目前最方便有效监听 URL 地址变化的方案（优雅）

单页面应用通过检测 URL 的 hash 改变或 window.history （具体是 URL 的 path 部分）改变实现页面不刷新而能重新渲染，那么如何监听 hash 变化或 window.history 变化？

• 检测 hash 变化：通过 window.addEventListener('hashchange', () => {})可以直接简单有效地监听 URL 的 hash 哈希部分发生变化。
• 检测 window.history 变化：我通过百度和 Google 查阅了一些资料后发现，并没有一种方法可以做到一步到位监听 window.history 变化。

添加一个自定义事件用于监听 URL 变化

history.back()、history.forward() 和 history.go() 事件都会触发 popState 事件。但是 history.pushState() 和 history.replaceEstate() 不会触发 popState 事件。因此我们需要做些代码处理让它们都能触发某一个事件，以下是我在 stackoverflow 上找到一个方案：

添加一个自定义事件 locationchange，当 URL 发生变化（但不包括 hash 变化）就触发该事件，封装代码：

window.history.pushState = (fn => function pushState() {
	var ret = fn.apply(this, arguments)
	window.dispatchEvent(new Event('pushstate'))
	window.dispatchEvent(new Event('locationchange'))
	return ret
})(window.history.pushState)

window.history.replaceState = (fn => function replaceState() {
	var ret = fn.apply(this, arguments)
	window.dispatchEvent(new Event('replacestate'))
	window.dispatchEvent(new Event('locationchange'))
	return ret
})(window.history.replaceState)

window.addEventListener('popstate', () => {
	window.dispatchEvent(new Event('locationchange'))
})

使用：

window.addEventListener('locationchange', () => {
	console.log('location changed!')
})

附一：URL 字符串解析规则

（截图自： https://nodejs.org/api/url.html#url-strings-and-url-objects）