在 web spa 中，前端路由描述的 url 與 ui 之間的單向對映關係，即 url 變化引起 ui 頁面的更新（無需重新整理頁面）。
上面我們提到，在前端路由中，當 url 發生變化時，我們需要在不重新整理頁面的情況下，觸發 ui 頁面的更新。因此，在實現前端路由時，我們需要解決以下兩個核心的問題。
我們可以從 hash 和 history 兩種實現方式回答上述兩個問題。
為便於測試，我們使用了 github.com/zeit/serve 作為頁面伺服器，相關命令如下。
# 安裝依賴。
yarn
# 對 vanilla hash 進行演示。
yarn vanilla.hash
# 對 vanilla history 進行演示。
yarn vanilla.history
複製**
hash
頁面vanilla.hash.html的具體**如下。
複製**
vanilla.hash.js中，我們通過對hashchange事件進行監聽，從而檢測 url 是否變化。當 url 變化時，我們呼叫onhashchange函式，通過修改元素的innerhtml屬性，在頁面無重新整理的情況下，實現頁面檢視的更新。
// 維護 ui 頁面。
let routerview = null;
// 路由變化時，根據路由渲染對應 ui 頁面。
function onhashchange()
}// 頁面載入完不會觸發 hashchange，這裡主動觸發一次 hashchange 事件。
window.addeventlistener('domcontentloaded', () => );
// 監聽路由變化。
window.addeventlistener('hashchange', onhashchange)
複製**
頁面vanilla.history.html的具體**如下。
複製**
vanilla.history.js中，我們通過對popstate事件進行監聽，從而檢測 url 是否變化。當 url 變化時，我們呼叫onpopstate函式，通過修改元素的innerhtml屬性，在頁面無重新整理的情況下，實現頁面檢視的更新。
由於通過pushstate、replacestate和標籤改變 url 時，並不會觸發popstate事件，我們需要手動攔截。
// 維護 ui 頁面。
let routerview = null;
// 路由變化時，根據路由渲染對應 ui 頁面。
function onpopstate()
}// 頁面載入完不會觸發 hashchange，這裡主動觸發一次 hashchange 事件。
window.addeventlistener('domcontentloaded', () => ),
);});// 監聽路由變化。
window.addeventlistener('popstate', onpopstate);
複製**
在 nginx 中，我們需要新增以下設定：對於所有的請求，我們都響應相同的頁面，讓頁面來接管路由。
location /
複製**
serve中，我們只需定義rewrites陣列即可。
]}複製**
js原生實現路由
nodejs原生實現路由 實現單頁面跳轉 類似tab選項卡但不是tab選項卡 通過改變res.url位址實現跳轉 獲取http模組 const fs require fs 獲取fs檔案系統模組 const host localhost const port 3000 後端路由就是是乙個web伺服器 ...
前端實現路由
後端實現的路由本質是通過伺服器 與路徑的配合去訪問伺服器上的靜態資源。而我們現在的專案都是單頁面，路由控制權都是放在前端了。前端框架現在都是單頁面模式，了解他們實現的本質變得重中之重。前端實現路由有兩種方式 hash 與 history hash原本是作為頁面定位使用，本身會在url後攜帶 切換路由...
前端路由實現原理
路由 router 這個概念最先是後端出現的，是用來跟後端伺服器進行互動的一種方式，通過不同的路徑，來請求不同的資源，請求不同的頁面是路由的其中一種功能。前端隨著 ajax 的流行，資料請求可以在不重新整理瀏覽器的情況下進行。非同步互動體驗中最盛行的就是 spa 單頁應用。單頁應用不僅僅是在頁面互動...