在开发 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 模式可能是一个更安全的选择。
)
