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

Vue 的路由实现有两种主要模式：Hash 模式 和 History 模式，它们是通过 Vue Router 实现的。

一、Hash 模式（默认）

URL 形式：

http://example.com/#/home

特点：

使用 #（hash）符号后面的部分作为路由路径。

浏览器只会识别 # 前面的路径，不会向服务器发送 # 后面的内容。

刷新页面不会 404（因为请求永远不会发给后端）。

使用的是原生 window.onhashchange 事件。

优点：

兼容性好，支持 IE9+。

不需要服务器配置，适合部署在静态服务器或 GitHub Pages 上。

二、History 模式（HTML5 History API）

URL 形式：

http://example.com/home

特点：

不带 #，看起来像普通的 URL。

使用了 HTML5 的 history.pushState 和 history.replaceState API。

支持前进、后退、刷新等行为，路径干净。

缺点：

刷新页面时会请求服务器路径对应的资源。

如果服务器未正确配置 fallback，会导致 404。

部署时必须让后端支持“所有路径都重定向到 index.html”。

如何设置 Vue Router 模式

在 router/index.js 或初始化 Vue Router 时设置：

const router = new VueRouter({
  mode: 'history', // 或 'hash'
  routes: [...]
})

总结对比

模式	URL 形式	是否需要服务端支持	兼容性	刷新是否会 404
Hash	/#/home	❌ 不需要	好	否
History	/home	✅ 需要支持 fallback	略差	是（需配置）