Vue Router 中的 HTML5 History 模式详解

Vue Router 中的 HTML5 History 模式详解

vue-router 🚦 The official router for Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-router

什么是 History 模式

在 Vue Router 中，默认使用的是 hash 模式（URL 中有 # 符号）。这种模式通过 URL 的 hash 值来模拟完整 URL，当 hash 改变时页面不会重新加载。

而 HTML5 History 模式则利用了现代浏览器提供的 history.pushState API，允许我们在不重新加载页面的情况下改变 URL，同时保持页面状态。这种模式下的 URL 看起来更加自然，例如 http://example.com/user/123，没有 hash 符号。

如何启用 History 模式

在 Vue Router 的配置中，只需简单设置 mode 为 'history' 即可：

const router = new VueRouter({
  mode: 'history',  // 启用 HTML5 History 模式
  routes: [...]
})

服务器配置要求

使用 History 模式时需要注意一个重要问题：当用户直接访问某个深层链接时（如 http://example.com/user/123），服务器需要正确返回应用的入口文件（通常是 index.html），而不是返回 404 错误。

这是因为在单页应用中，路由是由前端控制的，服务器并不知道这些路由的存在。因此，我们需要在服务器端配置一个"回退路由"，将所有不匹配静态资源的请求都重定向到 index.html。

常见服务器配置示例

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) 配置

使用 connect-history-api-fallback 中间件可以轻松实现：

const express = require('express')
const history = require('connect-history-api-fallback')

const app = express()
app.use(history())
app.use(express.static('dist'))

IIS 配置

1. 安装 IIS UrlRewrite 模块
2. 在网站根目录创建 web.config 文件：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

注意事项

1. 404 页面处理：由于服务器会将所有未知路径重定向到 index.html，传统的服务器端 404 响应将不再有效。建议在 Vue 应用中添加一个通配符路由来显示 404 页面：

const router = new VueRouter({
  mode: 'history',
  routes: [
    // 其他路由...
    { path: '*', component: NotFoundComponent }  // 404 页面
  ]
})

2. SEO 考虑：对于需要良好 SEO 支持的应用，建议考虑服务器端渲染（SSR）方案。

3. 浏览器兼容性：History API 在 IE9 及以下版本不支持，如果需要支持这些旧浏览器，应该回退到 hash 模式或使用 polyfill。

为什么选择 History 模式

1. 美观的 URL：去除 hash 符号，URL 更加简洁自然
2. 更好的用户体验：URL 看起来像传统网站，符合用户习惯
3. SEO 友好：虽然单页应用本身对 SEO 有挑战，但干净的 URL 更有利于搜索引擎理解

实际应用建议

在实际项目中启用 History 模式时，建议：

1. 确保开发环境和生产环境的服务器都正确配置
2. 在应用内实现自定义的 404 页面
3. 如果使用 CDN，确保 CDN 也支持回退到 index.html 的配置
4. 对于大型应用，考虑路由懒加载以优化性能

通过合理配置和使用 History 模式，可以显著提升 Vue 应用的专业性和用户体验。

vue-router 🚦 The official router for Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-router