目前單頁應用（spa）越來越成為前端主流，單頁應用一大特點就是使用前端路由，由前端來直接控制路由跳轉邏輯，而不再由後端人員控制，這給了前端更多的自由。
目前前端路由主要有兩種實現方式：hash模式和history模式，下面分別詳細說明。
比如在用超連結製作錨點跳轉的時候，就會發現，url後面跟了"#id"，hash值就是url中從"#"號開始到結束的部分。
hash值變化瀏覽器不會重新發起請求，但是會觸發window.hashchange事件，假如我們在hashchange事件中獲取當前的hash值，並根據hash值來修改頁面內容，則達到了前端路由的目的。
hash模式看起來是比較醜的，都帶個"#"號，我們也可以採取history模式，history就是我們平時看到的正常的連線形式。history模式基於window.history物件的方法。
在html4中，已經支援window.history物件來控制頁面歷史記錄跳轉，常用的方法包括：
在html5中，window.history物件得到了擴充套件，新增的api包括：
history模式原理可以這樣理解，首先我們要改造我們的超連結，給每個超連結增加onclick方法，阻止預設的超連結跳轉，改用history.pushstate或history.replacestate來更改瀏覽器中的url，並修改頁面內容。由於通過history的api調整，並不會向後端發起請求，所以也就達到了前端路由的目的。
如果使用者使用瀏覽器的前進後退按鈕，則會觸發window.onpopstate事件，監聽頁面根據路由位址修改頁面內容。
也不一定非要用超連結，任意元素作為選單都行，只要在點選事件中通過 history 進行調整即可。
id="menu">
>
href="/index">首頁》
>
>
href="/news">資訊》
>
>
href="/user">個人中心》
>
>
//js:
//改造超連結，阻止預設跳轉，預設的跳轉是會重新整理頁面的
document.queryselector('#menu').addeventlistener('click',function (e) ,'',path) //修改瀏覽器中顯示的url位址
render(path) //根據path，更改頁面內容
}})
function render(path)
}//監聽瀏覽器前進後退事件，並根據當前路徑渲染頁面
window.onpopstate = function (e)
//第一次進入頁面顯示首頁
render('/index')
class router
add(route,callback))
}pushstate(path,data={})
listen(callback)
changea()})}
getcurrentpath()
renderhtml(path)
}}}
let router = new router()
router.add('/index',()=>)
router.add('/news',()=>)
router.add('/user',()=>)
router.listen((renderhtml)=>{
hash模式和history模式
hash 模式url裡面永遠帶著 號，我們在開發當中 預設使用這個模式 history 模式沒有 號，是個正常的url 適合推廣宣傳 考慮url的規範那麼就需要使用 history模式，因為當然其功能也有區別 history模式還有乙個問題就是，做重新整理操作，會出現404錯誤 那麼就需要和後端人配...
Vue中hash模式和history模式的區別
參考文章 在vue的路由配置中有mode選項，最直觀的區別就是在hash模式下的位址列裡的url夾雜著 號 而history模式下沒有。vue預設使用hash。mode hash mode history hash history 利用了 html5 history inte ce 中新增的 pus...
hash模式和history模式淺識
一 什麼是hash 和 history 模式？hash模式 hash模式的原理是onhashchange事件，可以通過window物件來監聽該事件 在hash模式下，當url發生變化時，瀏覽器會記錄下來，因此前進後退按鈕都可以使用 因此在該模式下，即使瀏覽器沒有請求伺服器，頁面也會和url一一對應起...