監聽前進后退在h5的popstate出來之前是不可能做到的，現在通過popstate就能做到，MDN這么說的：
當活動歷史記錄條目更改時，將觸發popstate事件。如果被激活的歷史記錄條目是通過對history.pushState（）的調用創建的，或者受到對history.replaceState（）的調用的影響，popstate事件的state屬性包含歷史條目的狀態對象的副本。
需要注意的是調用history.pushState()或history.replaceState()不會觸發popstate事件。只有在做出瀏覽器動作時，才會觸發該事件，如用戶點擊瀏覽器的回退按鈕（或者在Javascript代碼中調用history.back()或者history.forward()方法），不同的瀏覽器在加載頁面時處理popstate事件的形式存在差異。頁面加載時Chrome和Safari通常會觸發(emit )popstate事件，但Firefox則不會。
也就是說popstate可以監聽pushState和replaceState包括back和go，這也是vue中路由監聽的原理，代碼示例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>demo</title> </head> <body> <span class="js-news">新聞</span> <span class="js-music">音樂</span> <span class="js-sports">體育</span> <span class="js-literature">文學</span> <script> var locationHref = location.href; document.addEventListener("click", function (event) { var target = event.target; if (target.className == "js-news") { history.pushState("首頁", "", locationHref + "/11.html");//這種history模式的路由似乎監聽不到 } else if (target.className == "js-music") { history.pushState("音樂", "", locationHref + "#music"); }else if (target.className == "js-sports") { history.pushState("體育", "", locationHref + "#sports"); }else if (target.className == "js-literature") { history.pushState("文學", "", locationHref + "#literature"); } }); window.addEventListener("popstate", function () { console.log(history.state); }) </script> </body> </html>
關閉事件：
onbeforeunload與onunload事件
區別：
1)異同點
相同點：
onunload，onbeforeunload都是在刷新或關閉時調用，可以在<script>腳本中通過window.onunload來指定或者在<body>里指定。
不同點：
a)onbeforeunload在onunload之前執行 ，它還可以阻止onunload的執行。
b)onbeforeunload是正要去服務器讀取新的頁面時調用，此時還沒開始讀取;nunload則已經從服務器上讀到了需要加載的新的頁面，在即將替換掉當前頁面時調用 。
c)onbeforeunload是可以阻止頁面的更新和關閉的。但是onunload不能。
onload、onbeforeunload、onunload事件的執行順序:
打開頁面時：只執行onload
關閉頁面時：先onbeforeunload,后onunload
刷新頁面時：先onbeforeunload,后onunload，再onload
2)onbeforeunload、onunload事件
觸發於：
a)關閉瀏覽器窗口
b)通過地址欄或收藏夾前往其他頁面的時候
c)點擊返回，前進，刷新，主頁其中一個的時候
d)點擊 一個前往其他頁面的url連接的時候
e)調用以下任意一個事件的時候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit.
f)當用window open打開一個頁面，並把本頁的window的名字傳給要打開的頁面的時候。
g)重新賦予location.href的值的時候。
h)通過input type=”submit”按鈕提交一個具有指定action的表單的時候。
可以用在以下元素：
BODY, FRAMESET, window
瀏覽器支持：
IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+
3)解決刷新頁面時不調用onbeforeunload
4)onbeforeunload阻止頁面的更新和關閉
onbeforeunload="return '是否現在離開此頁面';">
問題：如何監聽history形式的路由，希望知道的大佬留言賜教
參考：
1.https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event MDN：popstate
2.https://www.cnblogs.com/shuiyi/p/5115188.html 圖解用HTML5的popstate如何玩轉瀏覽器歷史記錄
3.http://www.jquerycn.cn/a_10963 onbeforeunload與onunload事件的區別