核心技术
1..AJAX异步加载数据
2.地址栏改变，却不重新加载页面
2.1 哈希。即点击锚点，地址栏是会多一个#，却不会重新加载页面的
2.2 H5新出的API:window.history.pushState及window.history.replaceState，可以修改history栈，从而修改当前地址栏，也不会重新加载页面
概念
前端路由是指：一般是在单页面下，选择性的选择显示某一部分内容（AJax），并且地址栏也随之变化（修改地址栏），这俩部分同时变化，让用户感觉是进入了一个新页面
哈希#
<a name='a1'></a> //设置锚点 ，对应vue中的<router-view></router-view> 只不过vue配置了router，并且集中了路由出口
<a href="#a1">点击跳到a1锚点位置</a> //设置a标签，对应vue中的 <router-link to="/a1">点击跳到a1锚点位置</router-link>
window.history.pushState及 window.history.replaceState
history相关API使用：
1.History.back() 后退按钮 //会刷新页面
2.History.forward() 前进按钮。 //会刷新页面
3.History.go(num) 跳转到某一页 //会刷新页面
4.location.reload(bool) 刷新 Bool值为false则从缓存加载，true则从服务器加载 //会刷新页面
5.location.replace(url) 更新当前回话 //会刷新页面
6. location.href = url; 获取href或者设置href //会刷新页面
//前6个都会刷新页面，其实也就是我们浏览器的一些前进后退刷新等按钮的APi而已
//捕获页面是否被刷新（前6个都会导致页面刷新）的API：
window.onpopstate = function(event) {
console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
7.History pushState(obj,title,url) 在会话历史堆栈顶部插入一条记录 //不会刷新页面
8.History.replaceState(obj,title,url) 更新会话历史堆栈顶部记录信息 //不会刷新页面
区别
1.哈希# 优点：#后面内容，不会发送到服务器，对服务器不用修改配置。 缺点：地址栏出现#，不美观
2.window.history.pushState及 window.history.replaceState 优点：美观 缺点：地址栏修改，用户操作（刷新，前进后退）会导致该地址会加载页面，需要服务器支持（即 要有相关路径的网页）
补充-vue动态路由，保存滚动条位置
其实就是根据地址，正则表达式，选择要加载的板块即可。
History.scrollRestoration 允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。
History.state 读取 历史堆栈顶部的状态的值
