vue路由模式（ hash 模式和 history 模式）

- 在 hash 模式下，路由的地址中带有 # 符号，例如： http://example.com/#/home 。 # 符号

后⾯的部分被称为 hash ，它不会被包含在 HTTP 请求中，因此对服务器端完全⽆效，只作为客户端

的⼀个标记

- 在 history 模式下，路由的地址不带 # 符号，例如： http://example.com/home 。需要注

意的是， history 模式需要服务器端的⽀持，否则在刷新⻚⾯或直接访问某个 URL 时会返回 404

错误

hash 实现原理：

在浏览器中， URL 的 hash （即 # 号后⾯的部分）可以通过 JavaScript 的 location.hash

属性获取和设置。当 URL 的 hash 发⽣改变时，浏览器并不会重新请求服务器，⽽是触发

hashchange 事件，我们可以通过 JavaScript 监听这个事件来实现 hash 路由。

hash 路由的实现原理就是利⽤了这个特性，将路由信息放在 URL 的 hash 中，通过监听

hashchange 事件来响应路由变化。在 Vue Router 中，使⽤

window.addEventListener('hashchange', ...) 来监听 hashchange 事件。

当⽤户点击链接或通过 JavaScript 修改 URL 的 hash 时，会触发 hashchange 事件，我们

可以通过监听这个事件，获取新的 hash 值，然后根据 hash 值来切换路由。在 Vue Router

中，使⽤ window.location.hash 来获取当前的 hash 值。

需要注意的是， hash 路由的优点是兼容性好，不需要服务器端的⽀持，但缺点是 URL 不太美观，

且 hash 值会被包含在浏览器的访问历史中。因此，现在更多的使⽤ history 路由。

history 实现原理：

在 HTML5 中，新增了⼀个 History API ，它提供了两个⽅法： pushState() 和

replaceState() ，可以在不刷新⻚⾯的情况下修改浏览器的历史记录。这就为实现 history 路由

提供了基础。

history 路由的实现原理是利⽤了这个 History API ，将路由信息放在 URL 的路径中，通过修

改浏览器的历史记录来响应路由变化。在 Vue Router 中，使⽤

window.history.pushState() 和 window.history.replaceState() 来修改浏览器的历史

记录。

当⽤户点击链接或通过 JavaScript 修改 URL 的路径时，会触发 popstate 事件，我们可以通

过监听这个事件，获取新的路径，然后根据路径来切换路由。在 Vue Router 中，使⽤

window.location.pathname 来获取当前的路径。

需要注意的是， history 路由的优点是 URL 美观，且不会被包含在浏览器的访问历史中，但缺点

是需要服务器端的⽀持，否则在刷新⻚⾯或直接访问某个 URL 时会返回 404 错误。