在現代的 web 開發中，單頁面應用（SPA）變得越來越流行。這類應用通常依賴於客戶端路由來提供流暢的使用者體驗，但在伺服器端，我們需要一種方式來確保這些路由能正常工作
這裏，我們將使用vue-router不同的歷史模式 | Vue Router官方推薦的 historyApiFallback 中介軟體，以及它如何幫助解決 SPA 路由問題。
解決的問題
當我們透過vue-router,history模式打包部署上線的時候，
const router = createRouter({
history: createWebHistory(),
// 對於無法匹配的頁面統一返回404頁面
routes: [{ path: '/:pathMatch(.*)', component: NotFoundComponent }],
})
可能遇到使用者訪問http://192.168.78.17:3000/awfwfaeageege頁面，會出現報錯，而不是返回前端指定404頁面
而我們想要實現的效果是這樣，返回404頁面
這時候就可以使用express中介軟體historyApiFallback
當你訪問 http://192.168.78.17:3000/awfwfaeage 時，整個流程的工作原理如下：
1. 客戶端請求
使用者在瀏覽器中輸入
http://192.168.78.17:3000/awfwfaeage，瀏覽器發起一個 HTTP 請求到伺服器。
2. 伺服器處理請求
伺服器收到這個請求後，會檢查該請求的 URL
/awfwfaeage。如果伺服器沒有找到與該 URL 對應的檔案或路由，它通常會返回一個 404 錯誤。這意味著伺服器不知道如何處理這個請求。
3. 返回 index.html
在使用 Vue Router 的歷史模式下，通常需要配置伺服器以處理所有路由請求，重定向到
index.html。這樣即使 URL 不對應於某個檔案，伺服器仍然能夠返回前端的單頁應用程式。如果伺服器配置不當，仍然會返回 404 頁面，而不是返回
index.html。
4. 前端處理
如果伺服器返回了
index.html，瀏覽器會載入這個 HTML 檔案。Vue 應用會啟動並初始化。Vue Router 在初始化時會檢查當前的 URL（即
/awfwfaeage），並嘗試找到與之匹配的路由。
5. 路由匹配
如果沒有定義對應
/awfwfaeage的路由，Vue Router 會根據設定返回一個 404 元件或頁面，提示使用者沒有找到對應的內容。
總結流程
使用者請求 URL：
/awfwfaeage。伺服器未找到檔案或路由，返回 404 錯誤。
如果伺服器配置錯誤，返回的不是
index.html，而是一個 404 頁面。如果返回了
index.html，Vue 應用啟動，但由於沒有匹配的路由，最終呈現 404 頁面。
什麼是 historyApiFallback？
historyApiFallback 是一個用於 Node.js 的中介軟體，常與 Express 框架結合使用。它的主要作用是攔截所有請求，確保未找到的路由返回主 HTML 檔案（通常是 index.html,注意是返回檔案，而不是重定向），從而允許前端路由接管。
傳統路由的挑戰
在傳統的多頁面應用中，每一個 URL 通常都有對應的伺服器端處理邏輯。但在 SPA 中，所有的路由都是由客戶端的 JavaScript 處理的。當用戶直接訪問一個深層路由（例如 /some-route）時，伺服器可能找不到相應的資源，這將導致 404 錯誤。
historyApiFallback 的工作原理
攔截請求：當用戶請求一個不對應於靜態檔案的 URL，
historyApiFallback會攔截這個請求。返回 HTML 檔案：中介軟體會返回指定的 HTML 檔案，而不是進行重定向。這樣，瀏覽器的位址列保持使用者訪問的路徑，前端 JavaScript 則可以根據這個路徑來渲染相應的內容。
示例程式碼
以下是如何在 Express 應用中使用 historyApiFallback 的示例：
javascriptCopy Codeconst express = require('express');
const historyApiFallback = require('connect-history-api-fallback');
const app = express();
// 使用 historyApiFallback 中介軟體
app.use(historyApiFallback());
// 靜態檔案服務
app.use(express.static('public'));
// 其他 API 路由
app.get('/api/some-endpoint', (req, res) => {
res.json({ message: 'Hello World!' });
});
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
在這個例子中，當用戶訪問 /some-route 時，historyApiFallback 會攔截這個請求並返回 index.html。接下來，前端的 JavaScript 可以根據當前 URL 進行相應的路由處理。
前端附加說明
這有一個注意事項。你的伺服器將不再報告 404 錯誤，因為現在所有未找到的路徑都會顯示你的 index.html 檔案。爲了解決這個問題，你應該在你的 Vue 應用程式中實現一個萬能的路由來顯示 404 頁面。
const router = createRouter({
history: createWebHistory(),
// 對於無法匹配的頁面統一返回404頁面
routes: [{ path: '/:pathMatch(.*)', component: NotFoundComponent }],
})
優勢總結
使用 historyApiFallback 有幾個明顯的優勢：
簡化路由管理：不需要為每個路由設定伺服器端處理，前端可以完全控制路由。
提高使用者體驗：使用者在位址列中看到的 URL 與他們訪問的內容一致，避免了 404 錯誤頁面的困擾。
適配 SPA：非常適合使用 React、Vue 或 Angular 等框架構建的單頁面應用。
結論
historyApiFallback 中介軟體是支援單頁面應用路由的重要工具，它確保了 SPA 在使用者直接訪問特定路徑時能正確地返回主 HTML 頁面。透過這種方式，我們可以讓前端路由更順暢，同時提升使用者體驗。如果你正在開發一個 SPA，強烈建議考慮使用這個中介軟體來管理路由。
作者：red潤
連結：https://juejin.cn/post/7432320733648207913
