Vue-Router中History模式
目錄
- history路由
- 官方示例
- Express中介軟體
- 客戶端兜底404
示例程式碼託管在：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 }
]
})