HashRouter 和 HistoryRouter的區別和原理

HashRouter 和 HistoryRouter的區別和原理

vue-router是Vue官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。vue-router默認 hash 模式，還有一種是history模式。

原理：

1. hash路由：hash模式的工作原理是hashchange事件，可以在window監聽hash的變化。我們在url后面隨便添加一個#xx觸發這個事件。vue-router默認的是hash模式—使用URL的hash來模擬一個完整的URL,於是當URL改變的時候,頁面不會重新加載,也就是單頁應用了,當#后面的hash發生變化,不會導致瀏覽器向服務器發出請求,瀏覽器不發出請求就不會刷新頁面,並且會觸發hasChange這個事件,通過監聽hash值的變化來實現更新頁面部分內容的操作

   對於hash模式會創建hashHistory對象,在訪問不同的路由的時候,會發生兩件事:
   HashHistory.push()將新的路由添加到瀏覽器訪問的歷史的棧頂,和HasHistory.replace()替換到當前棧頂的路由

2. history路由：

   主要使用HTML5的pushState()和replaceState()這兩個api結合window.popstate事件（監聽瀏覽器前進后退）來實現的,pushState()可以改變url地址且不會發送請求,replaceState()可以讀取歷史記錄棧,還可以對瀏覽器記錄進行修改

區別：

1. hash模式較丑，history模式較優雅
2. pushState設置的新URL可以是與當前URL同源的任意URL；而hash只可修改#后面的部分，故只可設置與當前同文檔的URL
3. pushState設置的新URL可以與當前URL一模一樣，這樣也會把記錄添加到棧中；而hash設置的新值必須與原來不一樣才會觸發記錄添加到棧中
4. pushState通過stateObject可以添加任意類型的數據到記錄中；而hash只可添加短字符串
5. pushState可額外設置title屬性供后續使用
6. hash兼容IE8以上，history兼容IE10以上
7. history模式需要后端配合將所有訪問都指向index.html，否則用戶刷新頁面，會導致404錯誤

使用方法:

<script>
        // hash路由原理
        // 監聽hashchange方法
        window.addEventListener('hashchange',()=>{
            div.innerHTML = location.hash.slice(1)
        })


        // history路由原理
        // 利用html5的history的pushState方法結合window.popstate事件（監聽瀏覽器前進后退）
        function routerChange (pathname){
            history.pushState(null,null,pathname)
            div.innerHTML = location.pathname
        }
        window.addEventListener('popstate',()=>{
            div.innerHTML = location.pathname
        })
</script>