vue路由或者前端路由的實現原理

1、利用h5中的history api 實現

主要利用history.pushstatae和history.replacestate來實現，不同之處在於，pushstate會增加一條新的歷史記錄，而replacestate則會替換當前的歷史記錄，並且再用該方法發布專案時，還需配置一下apache。

2、用url的hash實現

我們在url中常看到#，這個符號，而「#」這個符號有兩種情況，乙個是我們所謂的錨點，但是路由裡的錨點不叫錨點，我們稱之為hash,它主要利用監聽hash 值的變化來觸發事件 ——hashchange事件來做頁面區域性的更新。

兩者相比較而言，hash方案相容性好，而h5的history主要針對的高階瀏覽器.

兩者的區別：

實現的原理：

hash 模式的原理是 onhashchange 事件，可以在 window 物件上監聽這個事件。

history ：hashchange 只能改變 # 後面的**片段，history api （pushstate、replacestate、go、back、forward）則給了前端完全的自由，通過在window物件上監聽popstate()事件。

pushstate()、replacestate() 方法接收三個引數：stateobj、title、url。

// 設定狀態
history.pushstate(, "red", "red");
// 監聽狀態
window.onpopstate = function(event)
}// 改變狀態
history.back();
history.forward();複製**

應用場景：

通過 pushstate 把頁面的狀態儲存在 state 物件中，當頁面的 url 再變回到這個 url 時，可以通過 event.state 取到這個 state 物件，從而可以對頁面狀態進行還原，如頁面滾動條的位置、閱讀進度、元件的開關等。

呼叫 history.pushstate() 比使用 hash 存在的優勢：

pushstate 設定的 url 可以是同源下的任意 url ；而 hash 只能修改 # 後面的部分，因此只能設定當前 url 同文件的 url

pushstate 設定的新的 url 可以與當前 url 一樣，這樣也會把記錄新增到棧中；hash 設定的新值不能與原來的一樣，一樣的值不會觸發動作將記錄新增到棧中

pushstate 通過 stateobject 引數可以將任何資料型別新增到記錄中；hash 只能新增短字串

pushstate 可以設定額外的 title 屬性供後續使用

劣勢：