Vue 中 hash 与 history 的原理及区别

在 Vue 开发中，路由是实现单页面应用（SPA）多视图切换的关键机制，而 hash 模式和 history 模式是 Vue Router 提供的两种重要路由模式。深入了解它们的原理及区别，有助于开发者根据项目需求做出更合适的选择。

hash 模式原理

hash 模式的核心在于 URL 中的 hash 值（即 # 符号后面的部分）。浏览器监听 hashchange 事件，当 hash 值发生变化时，并不会向服务器发送请求，而是触发相应的回调函数。Vue Router 利用这一特性，监听 hashchange 事件，根据不同的 hash 值来渲染对应的组件。例如，当 URL 从 example.com/#/home 变为 example.com/#/about，hashchange 事件触发，Vue Router 识别到新的 hash 值 /about，并渲染关于页面的组件。

history 模式原理

history 模式借助 HTML5 的 History API，主要使用 pushState 和 replaceState 方法来改变浏览器的历史记录，同时不会触发页面刷新。当调用 router.push('/new-page') 时，Vue Router 使用 pushState 将新的路径添加到历史记录中，浏览器地址栏更新，但页面不会重新加载。服务器端需要对 history 模式进行特殊配置，因为不像 hash 模式那样，浏览器不会忽略路径直接请求根目录，服务器需要正确处理所有可能的路由请求，避免出现 404 错误。

两者区别

1. URL 表现：hash 模式的 URL 中带有 # 符号，不够美观，例如 example.com/#/user；而 history 模式的 URL 更加简洁自然，如 example.com/user。
2. 兼容性：hash 模式兼容性较好，支持所有主流浏览器；history 模式依赖 HTML5 的 History API，对于不支持的旧浏览器无法使用。
3. 服务器配置：hash 模式不需要服务器特殊配置，因为 hash 值的变化不会向服务器发起请求；history 模式需要服务器端进行配置，以确保正确处理路由请求。

在实际开发中，若项目对 URL 美观度要求较高，且目标浏览器都支持 HTML5，可选择 history 模式；若需要兼容旧浏览器或对服务器配置有困难，hash 模式则是更合适的选择。