寫在前面：通常 spa 中前端路由有2種實現方式：
下面就來介紹下這兩種方式具體怎麼實現的1.history基本介紹
window.history 物件包含瀏覽器的歷史，window.history 物件在編寫時可不使用 window 這個字首。history是實現spa前端路由是一種主流方法，它有幾個原始方法：
在html5，history物件提出了 pushstate() 方法和 replacestate() 方法，這兩個方法可以用來向歷史棧中新增資料，就好像 url 變化了一樣（過去只有 url 變化歷史棧才會變化），這樣就可以很好的模擬瀏覽歷史和前進後退了，現在的前端路由也是基於這個原理實現的。2.history.pushstate
pushstate(stateobj, title, url) 方法向歷史棧中寫入資料，其第乙個引數是要寫入的資料物件（不大於640kb)，第二個引數是頁面的 title, 第三個引數是 url (相對路徑)。
關於pushstate，有幾個值得注意的地方：
3.history.replacestatereplacestate(stateobj, title, url) 和pushstate的區別就在於它不是寫入而是替換修改瀏覽歷史中當前紀錄，其餘和 pushstate一模一樣
4.popstate事件
5.history實現spa前端路由**a.html
b.html
複製**
// 註冊路由
document.queryselectorall('.api').foreach(item => , link, link);
} else
}, false)
});// 監聽路由
window.addeventlistener('popstate', e => )
}, false)
複製**
popstate監聽函式裡列印的e.state便是history.pushstate()裡傳入的第乙個引數，在這裡即為1.hash基本介紹
url 中可以帶有乙個 hashhttp://localhost:9000/#/a.html
window 物件中有乙個事件是 onhashchange，以下幾種情況都會觸發這個事件：
2.hash實現spa前端路由**// 註冊路由
document.queryselectorall('.api').foreach(item => , false)
});// 監聽路由
window.addeventlistener('hashchange', e => )
}, false)
淺看spa單頁應用路由
路由觀察瀏覽器的url的變更。當url 變更時，路由會解析它並生成乙個新的路由例項。乙個基本的路由是這樣的 class router public initialize 讀取url private getroute 解析url private parseroute hash string comp ...
單頁web應用（spa）內部路由原理
可以將路由的實現分為兩部分 1.更新url頁面不重新整理 2.監聽url的變化，執行頁面替換邏輯 兩種實現方法 1.history.pushstate，replacestate等觸發popstate事件 2.location.hash的變化觸發hashchange事件 function getuui...
單頁應用SPA 多頁應用MPA
spa單頁應用 第一次進入頁面的時候會請求乙個html檔案，重新整理清除一下。切換到其他元件，此時路徑也相應變化，但是並沒有新的html檔案請求，頁面內容也變化了。原理是 js會感知到url的變化，通過這一點，可以用js動態的將當前頁面的內容清除掉，然後將下乙個頁面的內容掛載到當前頁面上，這個時候的...