Vue 的路由模式：hash 模式和 history 模式的区别_vue路由history和hash的区别

结论先行：

首先，hash 模式是通过监听 URL 的 Hash 变化来控制路由；而 History 模式是通过修改浏览器历史记录来进行路由控制；

那它们的区别呢，首先是 URL 格式的不同。hash 模式在 URL 中会使用 # 号来表示路由路径；而在 history模式下，URL 中不再包含哈希标记（#），而是直接使用真实的 URL 路径。

其次在兼容性方面，hash 模式对浏览器的兼容性更好，因为 history 模式要求浏览器支持 HTML5 History API ；

在搜索引擎优化方面，hash 模式下是不利于SEO 的，因为搜索引擎不会解析 # 后面的内容；

最后，就是 history 模式它是需要后端服务器配置支持的，以防止直接访问路由时出现 404 错误。而 hash 模式不要后端配置支持；

综上所述，hash 模式 适用于简单的前端开发，不需要特殊后端配置，对兼容性要求较高，但在 SEO 方面存在一定的问题。

而 history 模式 则适用于需要更友好的 URL 格式和更好的 SEO 支持的项目，但需要服务器端进行相应的配置。

具体解析： 

Vue Router 支持两种路由模式，分别是 Hash 模式和 History 模式。默认使用的是 hash 模式。

1、设置路由模式

在创建 Vue Router 实例时，通过设置 mode 属性来设置路由模式：

const router = new VueRouter({
  mode: 'history',
  routes: [
    // 路由配置
  ]
});

2、两种模式的区别 

在开发中，history 模式和 hash 模式的区别主要涉及 URL 的格式、兼容性、SEO 和后端配置等方面。

① URL 格式

hash 模式：

在 URL 中使用 # 符号来表示路由路径，例如：http://example.com/#/home  

缺点：不够美观，并且可能会导致 SEO 问题

history 模式：

URL 中不再需要 # 符号，使用常规的路径格式，例如：http://example.com/home

优点：URL 更加美观。符合传统 URL 格式；

② 兼容性

hash 模式： 

对浏览器的兼容性更好，可以在不支持 HTML5 History API 的浏览器中正常运行。

history 模式： 

需要浏览器支持 HTML5 History API，较低版本的浏览器可能不支持。

③  SEO（搜索引擎优化）

hash 模式： 

搜索引擎不会解析# 后面的内容，因此在 SEO 方面存在一定的问题。

history 模式： 

URL 更加友好，搜索引擎能够直接解析路由路径，有利于 SEO。

④  后端配置

hash 模式： 

不需要任何后端配置，因为路由路径是在客户端进行解析的。

history 模式： 

需要后端服务器配置支持，以防止直接访问路由时出现 404 错误。

3、总结 

综上所述，hash 模式 适用于简单的前端开发，不需要特殊后端配置，对兼容性要求较高，但在 SEO 方面存在一定的问题。

而 history 模式 则适用于需要更友好的 URL 格式和更好的 SEO 支持的项目，但需要服务器端进行相应的配置。

选择哪种模式取决于具体的项目需求和技术要求。

4、区别补充

hash 模式和 history 模式都属于浏览器自身的特性， Vue-Router 只是利用了这两个特性 （通过调用浏览器提供的接口）来实现前端路由。 

① hash 模式

使用 window.location.hash 来读取路由路径

hash 虽然出现在 URL 中， 但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

② history 模式

使用 HTML5 新特性： History API，通过修改浏览器的历史记录来实现路由导航；

​​​​​​​这种模式充分利用 history.pushState() 来完成 URL 跳转而无须重新加载页面。

利用了 HTML5 新增的 history.pushState() 和 history.replaceState() 方法对浏览器历史记录栈进行修改，以及 popState 事件的监听到状态变更​​​​​​​。

在当前已有的 back、forward、go 的基础之上， 它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL， 但浏览器不会立即向后端发送请求。 

需要注意的是，在使用 history 模式时，如果用户直接访问一个路由路径，服务器需要配置以返回正确的页面，否则会出现 404 错误。

history 模式下，前端的 URL 必须和实际向后端发起请求的 URL一致；如 http://example.com/person/id 如果后端缺少对 /person/id 的路由处理，将返回 404 错误。

要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源， 则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。只需在后端（Apache 或 Nginx）进行简单的路由配置， 同时搭配前端路由的 404 页面支持。

5、实现原理

hash 模式： 

在 Hash 模式下，路由信息会被保存在 URL 的 Hash 部分，通过监听 Hash 变化来进行路由控制；

history 模式： 

在 History 模式下，路由信息会被保存在浏览器的 History API 中，通过修改浏览器历史记录来进行路由控制；