vueRouter hash模式和history模式

Vue Router 的 hash 模式 和 history 模式 主要区别如下：

1. URL 表现形式

Hash 模式

URL 中带有 # 符号，例如：
http://example.com/#/about
# 后的内容称为哈希值，不会发送到服务器，浏览器会根据hash值的变化来渲染不同的组件
History 模式

URL 无 #，更接近传统路径，例如：
http://example.com/about

路径直接作为服务器请求的一部分。

2. 实现原理

Hash 模式

基于浏览器的 hashchange 事件 和 URL 哈希值：
- 当hash值发生变化时，会触发该事件，Vue Router监听这个事件，根据新的hash值来渲染对应的组件。
- 由于hash值的变化不会向服务器发送请求，所以在单页面应用中非常方便。
History 模式

基于 HTML5 History API （pushState、replaceState）：

当用户点击链接或者调用路由方法时，Vue Router会调用这些方法来更新浏览器的历史记录，同时渲染对应的组件。

3. 服务器配置

Hash 模式
- 无需服务器特殊配置
- 服务器仅处理根路径（如 /），# 后的内容由前端解析。
- 无论用户访问哪个hash值的URL，服务器都会返回单页面应用的HTML文件，然后由前端的Vue Router来处理路由切换。
History 模式
- 需服务器支持
- 当用户直接访问某个路由或者刷新页面时，浏览器会向服务器发送请求，如果服务器没有正确配置，直接访问子路由会返回 404。
- 所以需要在服务器端进行配置，让服务器在接收到所有请求时都返回单页面应用的HTML文件，然后由前端的Vue Router来处理路由切换
需配置服务器将所有路径重定向到入口文件（如 index.html），例如：
nginx 复制代码
```
# Nginx 配置示例
location / {
  try_files $uri $uri/ /index.html;
}
```

4. 兼容性

Hash 模式

兼容所有浏览器（包括 IE8 及以下）。
History 模式

依赖 HTML5 History API，不支持 IE9 及以下。

5. SEO 优化

Hash 模式

哈希内容默认不会被搜索引擎抓取，可能影响 SEO。
History 模式

URL 更友好，易于搜索引擎解析。但需配合服务端渲染（SSR）或预渲染解决动态内容抓取问题。

6. 应用场景

Hash 模式适用场景
- 无需服务器配置的静态站点。
- 需兼容旧浏览器的项目。
History 模式适用场景
- 追求 URL 美观的现代 Web 应用。
- 已配置服务器支持回退到 index.html。

7. Vue Router 配置

Hash 模式

javascript 复制代码

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [...],
});

History 模式

javascript 复制代码

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [...],
});

总结对比表

特性	Hash 模式	History 模式
URL 格式	带 `#`（如 `/#/about`）	无 `#`（如 `/about`）
服务器配置	无需特殊配置	需配置重定向到入口文件
兼容性	支持所有浏览器	不支持 IE9 及以下
SEO 友好性	较差	较好（需结合 SSR/预渲染）
实现原理	`hashchange` 事件	History API

根据项目需求选择模式：优先推荐 History 模式 （URL 简洁，SEO 友好），若需兼容旧环境或简化部署，可选用 Hash 模式。