Vue Router 历史模式详解：告别丑陋的 URL Hash

Vue Router 历史模式详解：告别丑陋的 URL Hash

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

什么是历史模式

在 Vue Router 中，默认使用的是 hash 模式，这种模式会在 URL 中添加一个 # 符号，例如 http://example.com/#/user/1。虽然这种方式能实现无刷新页面跳转，但 URL 看起来不够美观，也不符合我们对传统 URL 的认知。

历史模式（HTML5 History 模式）通过使用浏览器提供的 history.pushState API，允许我们使用更自然的 URL，如 http://example.com/user/1，同时保持单页面应用的特性。

如何启用历史模式

在创建 Vue Router 实例时，只需简单设置 mode 选项为 'history'：

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

服务器配置的重要性

启用历史模式后，虽然应用内导航能正常工作，但直接访问特定路由或刷新页面时会出现 404 错误。这是因为服务器没有正确配置来处理这些路由请求。

为什么会出现这个问题？

当用户直接访问 http://example.com/user/1 时：

1. 浏览器会向服务器请求 /user/1 这个资源
2. 服务器没有这个实际存在的文件
3. 服务器返回 404 错误

解决方案

我们需要配置服务器，让它对所有不匹配静态文件的请求都返回应用的入口文件（通常是 index.html）。这样 Vue Router 就能接管路由，正确渲染对应的组件。

主流服务器配置示例

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. 安装 URL Rewrite 模块
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>

处理 404 页面

由于服务器总是返回 index.html，传统的 404 错误页面将不再工作。我们有两种解决方案：

1. 客户端 404 处理

在 Vue Router 中添加通配符路由：

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

2. 服务端渲染 (SSR)

对于更复杂的应用，可以考虑使用服务端渲染，这样服务器可以正确返回 404 状态码。

历史模式的优缺点

优点

• URL 更美观，没有 # 符号
• 对 SEO 更友好
• 符合传统 URL 习惯

缺点

• 需要服务器端额外配置
• 旧版浏览器（IE9 及以下）不支持
• 服务器无法直接返回 404 状态码

最佳实践建议

1. 对于新项目，推荐使用历史模式
2. 确保服务器正确配置
3. 实现客户端 404 处理
4. 如果需要支持旧版浏览器，考虑提供回退方案
5. 对于 SEO 要求高的应用，考虑服务端渲染

通过合理配置和使用历史模式，你的 Vue.js 单页应用将拥有更专业的 URL 结构，提升用户体验和应用的专业度。

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