vue路由模式

1.两种模式： hash 模式和 history 模式。

2.两种模式区别： -在 hash 模式下，路由的地址中带有 # 符号，

例如：http://example.com/#/home。

# 符号 后⾯的部分被称为 hash，它不会被包含在 HTTP 请求中，因此对服务器端完全⽆效，只作为客户端 的⼀个标记 -在 history 模式下，路由的地址不带 # 符号，

例如：http://example.com/home。

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

3.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 路由。

4.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 错误。