## 一、概述 前端路由主要有兩種實現方式：hash模式和history模式； ## 二、hash模式 在用超鏈接制作錨點跳轉的時候，就會發現，url后面跟了"#id"，hash值就是url中從"#"號開始到結束的部分； hash值變化瀏覽器不會重新發起請求，但是會觸發window.hashChange事件，假如我們在hashChange事件中獲取當前的hash值，并根據hash值來修改頁面內容，則達到了前端路由的目的。 ## 三、history模式 hash模式看起來是比較丑的，都帶個"#"號，我們也可以采取history模式，history就是我們平時看到的正常的連接形式； ``` https://www.abc.com/plan#index //hash模式路由 https://www.abc.com/plan/index //history模式路由 ``` history模式基于window.history對象的方法；history模式原理可以這樣理解，首先我們要改造我們的超鏈接，給每個超鏈接增加onclick方法，阻止默認的超鏈接跳轉，改用history.pushState或history.replaceState來更改瀏覽器中的url，并修改頁面內容。由于通過history的api調整，并不會向后端發起請求，所以也就達到了前端路由的目的。 ## 四、區別 1、hash模式較丑，history模式較優雅； 2、history.pushState設置的新URL可以是與當前URL同源的任意URL；而hash只可修改#后面的部分，故只可設置與當前同文檔的URL； 3、history.pushState設置的新URL可以與當前URL一模一樣，這樣也會把記錄添加到棧中；而hash設置的新值必須與原來不一樣才會觸發記錄添加到棧中； 4、history.pushState通過stateObject可以添加任意類型的數據到記錄中；而hash只可添加短字符串； 5、history.pushState可額外設置title屬性供后續使用； 6、hash兼容IE8以上，history兼容IE10以上； 7、通過history api，我們丟掉了丑陋的#，但是它也有個問題：不怕前進，不怕后退，就怕刷新F5，（如果后端沒有準備的話）,因為刷新是實實在在地去請求服務器的,不玩虛的。 在hash模式下，前端路由修改的是#中的信息，而瀏覽器請求時是不帶它玩的，所以沒有問題.但是在history下，你可以自由的修改path，當刷新時，如果服務器中沒有相應的響應或者資源，會分分鐘刷出一個404來； 8、hash 本來是拿來做頁面定位的，如果拿來做路由的話，原來的錨點功能就不能用了。其次，hash 的傳參是基于 url 的，如果要傳遞復雜的數據，會有體積的限制，而 history 模式不僅可以在url里放參數，還可以將數據存放在一個特定的對象中。