路由需要實現的功能
1.改變url且不讓瀏覽器向伺服器發出請求；
2.監測 url 的變化；
3.截獲 url 位址，並解析出需要的資訊來匹配路由規則。
前端目前只有2種模式
1.hash模式(ie8)
用a標籤或者window.location.hash設定雜湊值。
window.
addeventlistener
('hashchange',(
)=>
)
2.history模式(ie10)
為什麼還要搞個 history 呢？
首先，hash 本來是拿來做頁面定位的，如果拿來做路由的話，原來的錨點功能就不能用了。其次，hash 的傳參是基於 url 的，如果要傳遞複雜的資料，會有體積的限制，而 history 模式不僅可以在url裡放引數，還可以將資料存放在乙個特定的物件中。
最重要的一點：
如果不想要很醜的 hash，我們可以用路由的 history 模式history 模式是 html5 新推出的功能，主要使用history.pushstate和history.replacestate改變 url。
通過 history 模式改變 url 同樣不會引起頁面的重新整理，只會更新瀏覽器的歷史記錄。
api
window.history.
pushstate
(state, title, url)
// state：需要儲存的資料，這個資料在觸發popstate事件時，可以在event.state裡獲取
// title：標題，基本沒用，一般傳 null
// url：設定新的歷史記錄的 url。新的 url 與當前 url 的 origin 必須是一樣的，否則會丟擲錯誤。url可以是絕對路徑，也可以是相對路徑。
window.history.
replacestate
(state, title, url)
// 與 pushstate 基本相同，但她是修改當前歷史記錄，而 pushstate 是建立新的歷史記錄
window.
addeventlistener
("popstate"
,function()
);window.history.
back()
// 後退
window.history.
forward()
// 前進
window.history.go(
1)// 前進一步，-2為後退兩步，window.history.lengthk可以檢視當前歷史堆疊中頁面的數量
兩種模式對比
1.hash 模式只可以更改 # 後面的內容，history 模式可以通過 api 設定任意的同源 url
2.history 模式可以通過 api 新增任意型別的資料到歷史記錄中，hash 模式只能更改雜湊值，也就是字串
3.hash 模式無需後端配置，並且相容性好。history 模式在使用者手動輸入位址或者重新整理頁面的時候會發起 url 請求，後端需要配置 index.html 頁面用於匹配不到靜態資源的時候
Vue路由原理
知道路由的方便之處下面是它兩種模式的原理 預設是hash hash 通過位址列進行切換 不利於搜尋引擎優化 首先他利用了瀏覽器對於hash這種當時不進行重新整理，然後通過hashchange監聽hash的改變來進行dom的重新渲染，改變元件引進乙個新元件 function render window...
Vue路由原理
模式 hash路由的關鍵在於 在router link中，呼叫window.location.hash改變頁面的hash值，然後在router view中在window物件上監聽hashchange事件。router link template div span click jump slot sl...
vue路由或者前端路由的實現原理
1 利用h5中的history api 實現 主要利用history.pushstatae和history.replacestate來實現，不同之處在於，pushstate會增加一條新的歷史記錄，而replacestate則會替換當前的歷史記錄，並且再用該方法發布專案時，還需配置一下apache。2...