之前在学VueSSR的时候一直有个疑问，既然SSR比SPA首屏加载快又利于SEO，还能兼容多端（比如和WEEX结合），为什么SPA能火起来。后来发现其中很重要的一点就是路由切换的体验比SSR好（之前也看过，只是学到现在才慢慢体会出来）。
在讲vue 路由实现之前先看下浏览器对象默认的对象属性location

Location对象的属性

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
protocol	设置或返回当前 URL 的协议。
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号。
search	设置或返回从问号 (?) 开始的 URL（查询部分）。

Location对象的方法

方法	描述
assign()	加载新的文档。
reload()	重新加载当前文档。
replace()	用新的文档替换当前文档。
hashchange()	监听hashchange变化。

上面的属性和方法中除了hash,其他都会重新加载页面。

H5中的History对象的属性（部分）

属性	描述
length	历史记录数组的长度
state	表示当前的处在哪个记录上

H5中的History对象的方法（部分）

方法	描述
back()	等效于用户点击回退按钮
forward()	等效于用户点击前进按钮
go(num)	通过指定一个相对于当前页面位置的数值加载页面
pushState(json, "", url)	添加一条记录
replaceState(json, "", url)	替换掉一条记录

其中pushState方法和replaceState方法可以分别增加和替换掉一条记录(必须同源)，而不会重新加载页面。

window.location.hash和window.history.pushState(或replaceState)唯一的不同是通过hash改变url带入#，而后者不会。而Vue 路由的两种模式就是基于location和history这2个对象的！

ps:注意这里可以通过重写pushstate和replacestate实现对history模式路由的监听

最后说下两者的应用场景，如果hash模式F5刷新是不会向服务端请求#后面的url的，而history模式会，如果服务端没做处理，很容易出现404！

参考文献

https://www.cnblogs.com/historymemory/p/6393539.html