vue-router：hash与history

结论

实现原理：

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()方法会修改历史记录但不会引起页面刷新