监听前进后退在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.http://www.jquerycn.cn/a_10963  onbeforeunload与onunload事件的区别


积累小的知识,才能成就大的智慧,希望网上少一些复制多一些原创有用的答案