深度剖析SPA前端路由原理与实现方式
1.什么是SPA
single page web application
web项目只有一个HTML页面，传统页面有好几个HTML文件。切换路由的时候，不会跳转路由
通过切换视图
2.什么是前端路由
根据不同的url地址展示不同的内容或页面
后端：mvc，根据客户提交的路径，将请求解析到相应的控制器
所谓的路由：就是负责相应的客户的http请求，客户发送一个请求，我们通过一个对应的处理函数来处理客户的请求
路由=》函数
url发起请求，通过映射的函数来处理这个请求
// 多页面
ajax出现的，才慢慢有了spa
大大的提高了web应用的交互体验
1.spa无法记住用户的操作记录，无论是刷新，还是前进后退，都没有办法展示用户真实的期望内容
2.spa由于业务的不同它会有多重的页面展示形式，但是只有一个url，对seo不友好，不方便搜索引擎进行收录
前端路由
就是为了解决上述两个问题
1.改变我们的url，并且不让我们的浏览器向我们的服务器发起请求
2.我们必须要监听到url的变化
前端路由中
实现我们路由有两种机制：
1.基于HASH
2.history
什么是hash
url:http://study.163.com/#lincancan
#lincancan 就是我们的hash值
hash值的变化，不会导致浏览器向服务器发起请求
hash的改变会触发
hashchange事件
h5的history出现之前，基本都是使用hash的模式实现路由
history的实现
BOM
通过history对象
history.go(-1) //后退一夜
简单的实现页面跳转
h5中，两个新的api
改变url，不会刷新页面
history.pushState();
hisory.replaceState();
具备实现前端路由的能力
hash模式，当hash变化时候，可以通过hashchange进行监听
而history的改变，并不会触发任何事件，所以我们暂时无法监听history
换思路
可以罗列出所有可能触发history改变的情况，我们把这些情况进行一个拦截，变相的去监听history的改变
在单页的history中，url的变化：有几种方式引起
1.点击浏览器的前进或后退，会不会引起url的变化
2.点击a标签是不是会引起我们的url的变化
3.js中，触发history.pushState()函数
4.js中，触发history.replaceState()函数