示例代碼托管在： "http://www.github.com/dashnowords/blogs" 博客園地址： "《大史住在大前端》原創博文目錄" 華為雲社區地址： "【你要的前端打怪升級指南】" [TOC] history路由 模式是指使用HTML5的 實現客戶端路由的模式， 它的典型表現就是 ...
目錄
示例代碼托管在：http://www.github.com/dashnowords/blogs
博客園地址：《大史住在大前端》原創博文目錄
華為雲社區地址：【你要的前端打怪升級指南】
history路由
history模式是指使用HTML5的historyAPI實現客戶端路由的模式，它的典型表現就是去除了hash模式中url路徑中的#。對於前端路由基本原理還不瞭解的讀者可以看這篇博文【javascript基礎修煉(6)——前端路由的基本原理】。在使用Vue-Router時開啟history模式非常容易，只需要在實例化路由時傳入mode:'history'配置項即可，但缺少服務端支持時，基於historyAPI的路由無法從url地址欄直接訪問指定頁面，這個很容易理解，因為url地址欄里輸入後回車相當於發送了一次GET請求，那麼不帶#的路由路徑就和普通的API介面是一樣的，既然服務端並沒有定義這樣的介面，那直接訪問時出現404頁面就很正常了。
官方示例
官方提供了很多處理這種場景的方式，以node.js版本的處理方案為例：
const http = require('http')
const fs = require('fs')
const httpPort = 80
http.createServer((req, res) => {
fs.readFile('index.htm', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.htm" file.')
}
res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8'
})
res.end(content)
})
}).listen(httpPort, () => {
console.log('Server listening on: http://localhost:%s', httpPort)
})不難看出，它的處理思路就是所有請求都強制重定向到首頁，相當於服務端屏蔽了訪問資源不存在的情況，而將路由的工作留給客戶端自己去處理，這樣啟用了history模式的前端路由在直接定位到子頁面時就不會報錯了。
Express中間件
express工程中使用connect-history-api-fallback中間件來處理後端路由的場景，它的使用方式非常簡單：
var history = require('connect-history-api-fallback');
var express = require('express');
var app = express();
app.use(history());源碼也只有120行（地址：connect-history-api-fallback中間件源碼 ），很容易閱讀，基本邏輯是只將滿足一些特定條件的請求進行重定向，也就是將路由請求和API請求區分開，重定向的規則可以自定義，路由請求的判斷條件包括：
GET請求- headers.accept為
text/html或*/*(設置為application/json或非字元串時會記錄錯誤日誌);
核心邏輯就是82-85行的：
rewriteTarget = options.index || '/index.html';
logger('Rewriting', req.method, req.url, 'to', rewriteTarget);
req.url = rewriteTarget;
next();也就是如果匹配到自定義的重定向規則就使用自定義場景，否則就使用/index.html作為預設值，然後重寫req.url屬性，接著進入下一個中間件執行其他邏輯。
客戶端兜底404
當服務端重定向後，如果沒有進行SSR的同構路由定製，對於所有路由請求都會返回index.html頁面，此時如果需要使用404頁面，就需要在客戶端路由中設定一個優先順序最低的兜底路由，由於優先順序的緣故，它不會影響其他精確匹配的路由配置：
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})
