之前在学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个对象的！
