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()方法會修改曆史記錄但不會引起頁面重新整理