基於hash和pushState的網頁前端路由實現

客戶端路由

對於客戶端（通常為瀏覽器）來說，路由的映射函數通常是進行一些DOM的顯示和隱藏操作。這樣，當訪問不同的路徑的時候，會顯示不同的頁面組件。客戶端路由最常見的有以下兩種實現方案：
* 基於Hash
* 基於History API

vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新加載。

基於Hash的路徑有：

http://test.com/
http://test.com/#/foobar

URL中#以及后面的部分都是hash。

const url=require('url')
var a=url.parse('http://test.com/a/b/#/foo/bar')
console.log(a.hash)
// => #/foo/bar

hash僅僅是客戶端的一個狀態，也就是說，當向服務器發請求的時候，hash部分並不會發過去。

HTML5新添了onhashchange事件給window對象，在Ajax應用中，開發人員通過利用url參數列表保存狀態或導航信息。通過監聽這個事件，可以實現簡單的路由

EventUtil.addHandler(window,"hashchange",(event)=>{
console.log("Old Url: "+event.oldURL+" New Url:　"+event.newUrl+" Current hash: "+window.location.hash);
var path=hash.substring(1);//去掉 # 號
})

 

使用一下代碼檢測瀏覽器是否支持hashchange()事件

var isSupported= ("onhashchange" in window)&&
(document.documentMode === undifined || document.documentMode>7);//IE8+才支持

基於History API的路徑有：

http://test.com/
http://test.com/foobar

當直接訪問http://example.com/的時候，兩者的行為是一致的，都是返回了index.html文件。

當從http://example.com/ 跳轉到 http://example.com/#/foobar或者http://example.com/foobar的時候，也都是正常的，因為此時已經加載了頁面以及腳本文件，所以路由跳轉正常。

當直接訪問  http://example.com/#/foobar  的時候，實際上向服務器發起的請求是 http://example.com/ ,因此會首先加載頁面及腳本文件，接下來腳本執行路由跳轉,一切正常。

當直接訪問 http://example.com/foobar 的時候，實際上向服務器發起的請求也是 http://example.com/foobar ，然而服務器端只能匹配  / 而無法匹配 /foobar ，因此會出現404錯誤。
因此需要對服務器路由映射進行改造.

比如,在Express中進行靜態路由映射 或者 動態路由映射

app.get('/user',(req,res,next)=>{
// ...do something
});
app.get('/user/:id',(req,res,next)=>{
// ...do something
// var id=req.query.id;
});