隨著 ajax 的使用越來越廣泛，前端的頁面邏輯開始變得越來越複雜，特別是spa的興起，前端路由系統隨之開始流行。
從使用者的角度看，前端路由主要實現了兩個功能（使用ajax更新頁面狀態的情況下）：
記錄當前頁面的狀態（儲存或分享當前頁的url，再次開啟該url時，網頁還是儲存（分享）時的狀態）；
可以使用瀏覽器的前進後退功能（如點選後退按鈕，可以使頁面回到使用ajax更新頁面之前的狀態，url也回到之前的狀態）；
作為開發者，要實現這兩個功能，我們需要做到：
改變url且不讓瀏覽器向伺服器發出請求；
監測 url 的變化；
截獲 url 位址，並解析出需要的資訊來匹配路由規則。
我們路由常用的hash模式和history模式實際上就是實現了上面的功能。
這裡的 hash 就是指 url 尾巴後的 # 號以及後面的字元。這裡的 # 和 css 裡的 # 是乙個意思。hash 也 稱作 錨點，本身是用來做頁面定位的，她可以使對應 id 的元素顯示在可視區域內。
由於 hash 值變化不會導致瀏覽器向伺服器發出請求，而且 hash 改變會觸發 hashchange 事件，瀏覽器的進後退也能對其進行控制，所以人們在 html5 的 history 出現前，基本都是使用 hash 來實現前端路由的。
使用到的api：
window.location.hash = 'qq' // 設定 url 的 hash，會在當前url後加上 '#qq'
var hash = window.location.hash // '#qq'
window.addeventlistener('hashchange', function())
首先，hash 本來是拿來做頁面定位的，如果拿來做路由的話，原來的錨點功能就不能用了。其次，hash 的傳參是基於 url 的，如果要傳遞複雜的資料，會有體積的限制，而 history 模式不僅可以在url裡放引數，還可以將資料存放在乙個特定的物件中。
最重要的一點：
如果不想要很醜的 hash，我們可以用路由的 history 模式—— 引用自 vuerouter 文件
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可以檢視當前歷史堆疊中頁面的數量
vue 前端路由及vue router兩種模式
路由這個概念最早在後端出現，隨後前後端分離，直至當今的單頁面應用，路由也在一直發生變化。本文來總結一下路由變化和vue router中的路由模式區別相關知識點。早期的頁面都是由html頁面在服務端渲染的，服務端直接返回給客戶端渲染好的html頁面供展示，乙個頁面對應乙個url,首先向服務端請求對應的...
cartographer 前端兩種匹配
目錄 1.相關性掃瞄匹配 1.1 輸入 1.2 步驟 2.ceres 優化 2.1 輸入 2.2 步驟 3.輸入資料的座標關係 cartographer 前端 相關性掃瞄匹配 和 ceres 優化兩種 double realtimecorrelativescanmatcher2d match con...
EPOLL兩種模式
select epoll 的特點 select 的特點 select 選擇控制代碼的時候，是遍歷所有控制代碼，也就是說控制代碼有事件響應時，select 需要遍歷所有控制代碼才能獲取到哪些控制代碼有事件通知，因此效率是非常低。但是如果連線很少的情況下，select 和epoll的lt 觸發模式相比，...