在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题。但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。
（3）popstate实现history路由拦截，监听页面返回事件
当活动历史记录条目更改时，将触发popstate事件。
1、如果被激活的历史记录条目是通过对 history.pushState() 的调用创建的，或者受到对 history.replaceState() 的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。
2、需要注意的是调用 history.pushState() 或 history.replaceState() 用来在浏览历史中添加或修改记录，不会触发popstate事件；
只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()）
我们测试一下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div>测试一下</div> <script type="text/javascript"> if (window.history && window.history.pushState) { window.onpopstate = function(event) { console.log("location: " + document.location + ", state: " + JSON.stringify(event.state)); //window.history.go(1) //window.history.back() }; //window.addEventListener("popstate", function(e) { // window.location = 'http://www.baidu.com'; //}, false); !function() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#"); }(); } </script> </body> </html>
刷新时不打印，刷新多次，再后退，每次都有，直到为null
