结论
实现原理:
hash利用hash改变时的onhashchange事件
history利用window.history在H5中新增的特性:onpopstate事件以及pushState()、replaceState()方法
由实现原理引发的特性
url: hsah方式实现的前端路由中有#字符,history实现的就是一个正常的url
页面刷新时的额外配置: 页面刷新时,由于http请求不包含hash所以,浏览器发出的请求都是对#之前的url的请求,在一个单页应用中一般所有页面都是相同的;但如果是history模式每个页面的url不同,页面刷新时会向服务器请求不同页面,这时需要服务器配置一个应对所有url情况的响应,可以重定向到首页
例如:http://domain.com/#/page1/subpage与http://domain.com/page1/subpage在页面刷新时,浏览器分别请求的是http://domain.com与http://domain.com/page1/subpage
认识hash
hsah是页面中的位置标志符,用#表示
特性:
- hash值不会在http请求中携带
- url中的hash值改变时,不会引起重载,浏览器只会滚动到相应位置,不会重新加载页面,浏览器不会向服务器发起请求
- url中的hash改变时,会修改浏览器历史记录
- 当hash变化时,会出发onhashchange事件
- 可以通过window.location.hash读取hash值
history
浏览器history对象
- go()、forward()、back()方法都会出发onpopstate事件
- pushState()与replaceState()方法会修改历史记录但不会引起页面刷新