【vue高频面试题—路由篇】：Vue-Router 路由的history模式和hash模式的区别

在 Vue-Router 中，History 模式和Hash 模式是两种常见的路由实现方式。它们的主要区别在于实现原理和 URL 表现形式：

---

1. Hash 模式

实现原理

• 基于浏览器的 hashchange 事件，通过监听 URL 的 #（hash）部分的变化来实现路由切换。
• # 后的内容是不会发送到服务器的，仅在前端可见。

URL 表现

• URL 中包含 # 符号，例如：

  bash
  复制代码
  http://example.com/#/home
  

特点

1. 兼容性好

   • 支持所有现代浏览器，甚至是一些较老的浏览器。

2. 不需要服务器配置

   • 因为 # 后的内容不会发送到服务器，所以服务器不会处理这些路由，默认会将所有请求交给单页应用。

3. URL 不美观

   • 包含 # 符号的 URL 对用户体验和 SEO 不友好。

---

2. History 模式

实现原理

• 基于 HTML5 的 History API，包括 pushState 和 replaceState 方法。
• 通过操作浏览器的历史记录栈，实现路径的改变，而无需刷新页面。

URL 表现

• URL 中没有 # 符号，例如：

  arduino
  复制代码
  http://example.com/home
  

特点

1. URL 美观

   • URL 更像传统的多页面应用，用户体验更好。

2. 支持前进和后退

   • 可利用浏览器的历史记录进行页面导航。

3. 需要服务器支持

   • 当用户直接访问 /home 这样的路径时，浏览器会向服务器发送请求。如果服务器没有配置重定向规则，可能会出现 404 错误。通常需要配置服务器将所有未匹配的请求指向应用的入口文件。

---

两者的对比总结

特点	Hash 模式	History 模式
URL 表现	http://example.com/#/home	http://example.com/home
实现原理	基于 hashchange 事件	基于 HTML5 History API
兼容性	支持所有浏览器	仅支持现代浏览器
需要服务器配置	不需要，默认支持	需要服务器配置重定向规则
SEO 支持	不支持，# 后的内容不被搜索引擎索引	更好支持，URL 可直接被索引
用户体验	URL 不美观，体验较差	URL 美观，体验更好