前端實現路由
目的：
後端實現的路由本質是通過服務器代理與路徑的配合去訪問服務器上的靜態資源。
而我們現在的項目都是單頁面，路由控制權都是放在前端了。
前端框架現在都是單頁面模式，瞭解他們實現的本質變得重中之重。
簡單分析：
前端實現路由有兩種方式 hash 與 history
- hash路由：
hash原本是作爲頁面定位使用，本身會在URL後攜帶#，切換路由只改變#後面的值，他不會改變瀏覽器訪問服務器資源的地址（#前的纔會被用在請求中），所以改變hash值就像我們改變url參數一樣不會導致頁面的重載
- history路由：
history路由直接會更改url，沒有任何特殊符號參雜，瀏覽器會識別爲訪問服務器具體的路徑造成訪問404現象，所以我們一般會配置404重定向到index頁面，然後交由index頁面處理
常用框架中兩種實現方式的共同點：
思考：比如history模式上線我們都要配置服務端，請求不到路徑就走404，那每次路由跳轉應該都會404，走服務端的重定向，network裏都會有請求index.html纔對,，而實際卻沒有，這是爲什麼？
其實無論hash還是history內部都是除了首次加載路由完全脫離了瀏覽器控制，後續的頁面內的路由跳轉事件都是前端處理的，瀏覽器的地址欄就相當於改了個樣式，並不會實際發送請求到後端，也就不會經過代理服務器的的重定向。
框架中就是轉化我們的路由配置，如果是內部跳轉，根據我們跳轉的地址，改變相應的url的顯示，內部監聽這次轉變，對相應模塊片段進行載入與卸載。如果是刷新或者瀏覽器回車式加載等，就是訪問服務器上的index頁面，再根據當前的url載入相應的片段
hash路由的實現
我們只需要調用location.hash就可以設置當前路由的hash值，接下來就是要監聽了，有兩種監聽方式
(_=>{
location.hash = 'index'
})()
1. window.onhashchange = (e) => {}
2. window.addEventListener('hashchange',()=>{})
然後就可以在方法中執行頁面的加載卸載
history路由的實現
history 模式依靠調用 history.pushState 方法以及監聽 popstate 事件
pushState將url放入歷史記錄，顯示在路由中，replaceState將url替換當前的歷史記錄，都不會向後端發起請求。
pushState 的時候，並不會觸發 popstate 事件, popstate只會監聽前進後退時候的變化，所以pushstate後就要根據url處理組件的邏輯，返回前進可以利用onpopstate來處理
(_=>{
history.pushState({name:'123'}, null, "index")
...// 首次組件處理
})()
1. window.onpopstate = (e) => {
...// 前進後退組件處理
}
2. window.addEventListener('popstate',()=>{})
pushState接收三個參數，一是傳遞的參數，二是頁面設置的標題，三是改變後的url
總結
兩種方式雖然有些不同，但是實現理念與效果差距並不大實際上的使用差距並不大。
前端路由的核心原理並不難，繼續往下要有很多細節的處理，理解了hash 和 history 兩種模式，可以幫我們更好的理解vue/react路由的運作原理