1.为什么用前端路由
- 传统web为服务端处理来自浏览器的请求时,根据不同的url拼接处对应的视图页面,通过http返回给浏览器进行解析渲染。
- 在web2.0的时代,应该讲服务端把中心放在实现核心数据处理路基和维护数据库,将部分数据交互和业务逻辑交给前端来负责,让前端来分担服务端的压力。
路由系统的作用主要是通过记录URL来记录web页面板块上ajax的变化
2.history API
- history.pushState(data,title,url) //向浏览器历史栈中添加一条记录
- history.replaceState(data,title,url) //替换浏览器历史栈中当前记录
注意:大多数浏览器会忽略title参数,可以不用指定
都会操作浏览器的历史栈,两个API都会更新或者覆盖当前浏览器的title和url为对应传入参数
注意:这两个API都是不能跨域的,API中的data参数是一个state对象,可以通过history.state读取出当前页面的历史状态。 - popstate事件
不让浏览器页面刷新的历史记录之间切换才能触发,即调用pushState,replaceState来操作历史记录才会触发。
3.使用URL中的hash部分
- hashchange事件
当页面hash变化时,会触发此事件,hash部分可以引导浏览器将这次记录推入历史记录栈顶,而当触发hashchange事件时,可以在其事件处理程序中判断当前的hash部分,调用相应的ajax操作。
对于低版本的IE,只能通过设置一个interval来不断轮询url是否发生变化,来判断是否发生了类似hashchange事件,同时可以声明对应的事件处理程序。