Vue Router哈希模式和历史模式

Vue官方文档

哈希模式（hash mode）

特点

• URL 格式：使用 # 符号分隔路径，哈希值之后的部分由客户端解析。

https://example.com/#/about

• 无需服务器配置：哈希值部分不会被发送到服务器，因此不需要额外的服务器配置。
• 浏览器支持广泛：兼容所有现代浏览器以及一些老旧浏览器。
• SEO 不友好：URL 中的 # 符号对搜索引擎不友好，影响 SEO。

工作原理

浏览器在哈希值发生变化时不会重新加载页面，只会触发 hashchange 事件，客户端脚本（如 Vue Router）可以捕捉并处理这个事件来进行导航。

适用场景

• 适用于不需要 SEO 支持的项目。
• 适用于不便或无法配置服务器的项目。

历史模式（history mode）

特点

• URL 格式：使用正常的路径格式，没有 # 符号。

https://example.com/about

• 需要服务器配置：需要配置服务器来处理所有路由请求，返回应用的主页面。
• SEO 友好：URL 结构对搜索引擎友好，有助于 SEO。
• 依赖 HTML5 History API：利用 pushState 和 replaceState 来管理历史记录，需要现代浏览器支持。

工作原理

浏览器通过 HTML5 History API 管理历史记录和导航。路径的变化会更新浏览器的地址栏，但不会重新加载页面，客户端脚本（如 Vue Router）处理路径变化。

为了支持历史模式，服务器需要配置来处理所有路由请求。例如，在 Nginx 中：

server {
  listen 80;
  server_name example.com;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

拓展

SEO（Search Engine Optimization，搜索引擎优化）是一系列提高网站在搜索引擎中自然排名的策略和技术。SEO 的目标是通过优化网站内容和结构，使其在搜索引擎结果页面（SERP）中的排名更高，从而吸引更多的有针对性的自然流量。