核心技术

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 优点：美观缺点：地址栏修改，用户操作（刷新，前进后退）会导致该地址会加载页面，需要服务器支持（即要有相关路径的网页）