Vue Router：History 模式 vs. Hash 模式

在开发 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 On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /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 模式可能是一个更安全的选择。