vueRouter的hash模式跟history的区别

vue-router 提供了两种常见的路由模式：hash 模式和 history 模式。这两种模式的主要区别在于 URL 的表现形式、路由的工作机制、以及它们如何与浏览器的历史记录和后端服务器交互。

工作原理：

Hash 模式是通过 URL 中的 hash (`#`) 符号来管理路由。浏览器不会发送 hash 后的内容到服务器，而是由前端 JavaScript 处理 URL 中 hash 后的部分。

例如，`http://example.com/#/home\`，这里的 `#/home` 只是前端 JavaScript 处理的部分，服务器仅加载 `http://example.com/\`。

特点：

不需要服务器支持**：由于 hash 模式不会改变浏览器的实际路径，它不会向服务器发送请求，因此服务器无需特别配置支持。
兼容性：支持所有浏览器，包括较老版本的浏览器。
用户体验：用户刷新页面时，仍然能保持当前的 hash 路径，页面不会跳转到 404 页面。
URL：在 URL 中，`#` 后面的部分不会被浏览器发送到服务器，这意味着 URL 中包含的 hash 值仅仅是客户端的路由状态。例如：`http://example.com/#/home\`。

示例：

javascript

const router = new VueRouter({

mode: 'hash',

routes: [

{ path: '/', component: Home },

{ path: '/about', component: About }

]

});

优缺点：

工作原理：

History 模式依赖于 HTML5 中的 `history.pushState()` 和 `history.replaceState()` API 来管理浏览器的历史记录。使用此模式时，URL 不会包含 `#`，而是表现为正常的路径，例如：`http://example.com/home\`。
当用户点击浏览器的前进/后退按钮时，`vue-router` 会根据 URL 改变页面内容，但不会进行全页面的刷新。

特点：

不包含 `#`：URL 更加简洁、优雅，符合传统的 RESTful 风格。
需要服务器支持：当用户直接刷新页面时，浏览器会向服务器发出请求。若刷新一个非根路径（例如：`/home`），服务器需要配置重定向或处理所有请求并返回同一个 HTML 文件，确保 Vue 应用能正常运行。如果服务器没有进行适当的配置，刷新可能导致 404 错误。
SEO 友好：由于没有 hash 符号，URL 看起来更像传统的网站 URL，有助于 SEO，搜索引擎可以正确地解析和索引路径。

示例：

javascript

const router = new VueRouter({

mode: 'history',

routes: [

{ path: '/', component: Home },

{ path: '/about', component: About }

]

});

优缺点：

| 特性 | Hash 模式 | History 模式 |

|--------------------------|--------------------------------------------------|---------------------------------------------------|

| URL 显示 | 带 `#`，例如 `http://example.com/#/home\` | 无 `#`，例如 `http://example.com/home\` |

| 是否需要服务器支持 | 不需要 | 需要，服务器需要正确配置以处理非根路径 |

| SEO 友好 | 不太友好，搜索引擎通常无法解析 `#` 后的内容 | SEO 友好，搜索引擎能正确解析路径 |

| 兼容性 | 兼容所有浏览器，尤其是旧版本浏览器 | 现代浏览器支持较好，旧版浏览器不完全支持 |

| 用户体验 | 刷新页面时，hash 变化不会影响页面加载，易于管理 | 刷新页面时，服务器需要处理并返回 HTML 页面 |

| 历史记录 | 不支持历史记录 API 的细粒度控制 | 支持 `history.pushState()` 和 `history.replaceState()` API，控制历史记录更灵活 |

选择建议：