在開發 SPA（單頁應用程序）時，路由管理是不可或缺的一部分。Vue.js 框架中的 Vue Router 提供了兩種主要的路由模式：History 模式和 Hash 模式。理解這兩種模式的區別及其實現方式，對于開發和部署 Vue 應用至關重要。
Hash 模式
Hash 模式是 Vue Router 的默認模式。它通過 URL 中的 hash（#號）來實現路由。例如，一個使用 Hash 模式的 URL 可能看起來像這樣：http://example.com/#/user/id。Hash 模式的主要優勢在于，它的實現非常簡單且不依賴于服務器配置：由于 URL 的 hash 部分永遠不會被服務器接收，因此不會影響頁面的加載。
History 模式
History 模式使用 HTML5 的 History API 來實現，允許你創建類似于常規 URL 的路由。例如：http://example.com/user/id。使用 History 模式可以讓你的應用看起來更像一個真正的網站。然而，它要求服務器在處理路由時能夠正確地配置。
History 模式的問題：404 錯誤
當使用 History 模式時，如果用戶直接訪問一個深層鏈接或者刷新頁面，服務器端可能會返回一個 404 錯誤。這是因為服務器端沒有找到對應的文件。為了解決這個問題，服務器需要配置為對所有的訪問請求都返回同一個 index.html 頁面。這樣，Vue Router 就可以接管路由的控制權，正確地渲染對應的組件。
配置服務器支持 History 模式
以下是幾種常見的服務器配置示例，用于支持 History 模式：
- Apache:
<IfModule mod_rewrite.c>RewriteEngine OnRewriteBase /RewriteRule ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.html [L]
</IfModule>
- Nginx:
location / {try_files $uri $uri/ /index.html;
}
- Node.js (Express):
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('*', (req, res) => {res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
});
- ruoyi中調整:
export default new Router({mode: 'hash', // 在url中會有#號// mode:'history', // 在url中無#號scrollBehavior: () => ({ y: 0 }),routes: constantRoutes
})
結論
選擇哪種模式取決于你的具體需求以及你對服務器環境的控制程度。如果你可以配置服務器以支持 History 模式，那么它通常是一個更好的選擇，因為它可以提供更干凈、更友好的 URL。如果你無法控制服務器配置，那么 Hash 模式可能是一個更安全的選擇。
)
