在单页应用中，路由通常由前端配置，根据不同的url显示不同的内容。要知道这是怎么实现的，首先要了解浏览器提供的两大API：window.locationlocation.hreflocation.hashlocation.searchlocation.pathnamewindow.historyhistory.pushState()history.replaceState()history.go()history。back()history.forward()window.location我们先了解location对象，它有很多属性。我们可以通过更改其属性值来修改页面的url。在单页应用中我们需要做的是在不刷新页面的情况下更改url。location接口提供了以下两种方式：分配location.href时，只改变url的hash，直接分配location.hash。属性location.search会直接刷新页面，这个就不解释了。不过应该可以只通过改变hash来改变location.pathname，但实际上浏览器会对这个属性的值进行编码，所以带#的值是不能直接赋值的。window.historyhistory接口是HTML5中新增的接口，它有五个方法可以在不刷新页面的情况下更改url。history.pushState()history.replaceState()history.go()上面只演示了三个方法，因为history.back()等同于history.go(-1)，history.forward()等同于history。go(1)，这三个接口相当于浏览器接口的前进和后退。如何监听url的变化现在我们知道了如何在不刷新页面的情况下改变页面的url。虽然页面没有刷新，但是我们想改变页面显示的内容。这就需要js监听url的变化来达到我们的目的。我们有两个事件可以监听url的变化：hashchangehashchange事件可以监听urlhash的变化。先添加事件监听的代码：window.addEventListener('hashchange',function(e){console.log(e)})然后就可以在页面的console中愉快的实验了：从上图我们可以知道No不管hash是直接通过location接口改变，还是通过history接口forward和backward（只有hash改变的时候），我们都可以监测到urlhash的变化。但是这个事件只能监听urlhash的变化。所以我们需要一个更强大的事件：popstate。popstatepopstate事件可以监听除history.pushState()和history.replaceState()之外的url的变化。先添加事件监听的代码：window.addEventListener('popstate',function(e){console.log(e)})然后就可以在页面的console中愉快的实验了：其实不只是历史.pushState()和History.replaceState()在改变url时不会触发popstate事件，当这两个方法只改变urlhash时也不会触发hashchange事件。Hash模式和history模式我们都知道单页应用的路由有两种模式：hash和history。如果我们不使用hash方式的history.pushState()和history.replaceState()方法，我们只需要在hashchange事件回调中写url变化时的逻辑即可。在history模式下，我们不仅需要在popstate事件回调中处理url变化，还需要分别在history.pushState()和history.replaceState()方法中处理url变化。而且历史模式还需要后台配合，不然用户刷新页面只会看到404？所以我们的工作在hash模式下其实更简单，但是为什么现在推荐使用history模式呢？不是hash方式的url太丑了。毕竟，这是一个面对面的世界？但是，vue-router在浏览器支持pushState()的情况下使用history.pushState()来改变url即使是hash模式。不知道有没有什么意义？还有待研究...
