Vue的路由实现模式：hash模式和history模式

Vue 路由的两种模式：

hash 模式 ：

类似于住在一个大房子里，你的地址很长，但用一个 "门牌号" （# 后面的部分）来标识你住哪间房间。

例如：
复制代码
bash

http://example.com/#/home

这就好比 "example.com" 是房子，#/home 是具体的房间号。
history 模式 ：

就像住在一个独栋小别墅里，每个房子都有一个完整的门牌地址。

例如：
复制代码
arduino

http://example.com/home

hash 模式：怎么工作？

URL 中的 # 后面是 不会发给服务器的，只是供浏览器和前端用的。
- 比如访问 http://example.com/#/home，服务器只看到 http://example.com，完全忽略 #/home。
- 前端代码通过监听 # 部分的变化 （onhashchange 事件），让页面切换。
为什么好用？

因为它和服务器无关！只需要前端代码实现逻辑，页面切换的时候浏览器不会刷新。

优点：

简单，不需要服务器特殊配置。
浏览器兼容性很好，所有主流浏览器都支持。

缺点：

URL 丑陋，有个 #，看起来不美观。
不利于 SEO（因为 # 后的内容不会被搜索引擎抓取）。

history 模式：怎么工作？

URL 没有 #，路径看起来干净漂亮，比如：http://example.com/home。
- 前端用 HTML5 的新技术（pushState 和 replaceState），控制浏览器的地址栏变化，但页面不会刷新。
- 这种地址会被当成真正的文件路径发给服务器，所以 需要服务器支持，否则直接访问可能会返回 404。
为什么更复杂？

因为服务器需要知道这个请求应该返回首页 index.html，否则服务器会以为你在请求 /home 文件，但这个文件可能并不存在。

优点：

URL 美观，没有 #。
支持 SEO，因为搜索引擎可以识别完整的路径。

缺点：

需要配置服务器支持，不然会有 404 问题。
兼容性稍差（需要支持 HTML5 的浏览器）。

两种模式的对比，换个角度讲：

假设你在学校图书馆工作：

hash 模式：
- 图书馆里挂了一个小白板，板上写着"在哪个房间可以找到书"。
- 每次你在小白板上写房间号，比如 #/room3，大家看了就知道要去 3 号房间找书。
- 不管你怎么改小白板的内容，图书馆本身没有任何变化，也不需要任何调整。
history 模式：
- 图书馆直接在每个房间门上写清楚地址，比如 /room3。
- 但如果有人从外面来，直接走到 /room3 的门口，结果发现门打不开，因为门口没有任何标志，得去找图书馆管理员说明。
- 管理员需要做额外配置，告诉所有人："不管你来找哪间房，先去前台（首页）拿到指引"。

怎么选择模式？

如果你是简单的前端页面，或者不用考虑 SEO，那直接用 hash 模式 ，简单快捷，URL 里多一个 # 也没什么。
如果你是一个正式的商用网站，需要漂亮的 URL（没有 #），还要对搜索引擎友好，那就用 history 模式 。
注意：要配合服务器配置，不然刷新或直接访问某个路径可能会返回 404。

Vue Router 中的实现：

Vue Router 的 mode 参数决定了用哪种模式：

hash 模式：

复制代码

javascript

const router = new VueRouter({ mode: 'hash', // 默认是 hash 模式 routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] });

history 模式：

复制代码

javascript

const router = new VueRouter({ mode: 'history', // 启用 history 模式 routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] });

history 模式下服务器需要做什么？

如果你用的是 history 模式，你需要告诉服务器，不管访问哪个路径，都返回同一个首页（比如 index.html），让前端去处理页面切换。

以 Nginx 为例：

复制代码

nginx

server { listen 80; server_name example.com; location / { root /path/to/your/project; index index.html; try_files $uri /index.html; } }

这段配置的意思是：

try_files $uri：先看用户访问的路径是不是有对应的文件。
如果文件不存在，就返回首页 /index.html，让前端接管。