Vue Router
单页应用的路由原理
两种模式
Hash 模式
URL 带 #：example.com/#/home
┌────────────────────────────────────────────┐
│ URL: http://example.com/#/home │
│ │ │ │
│ │ └─ hash: /home │
│ └─ origin，不发送给服务器 │
└────────────────────────────────────────────┘
原理：监听 hashchange 事件
window.addEventListener("hashchange", () => {
// URL 变化了，获取新 hash
const hash = window.location.hash;
// 渲染对应组件
render(hash.slice(1));
});
// 跳转时只改 hash，不会刷新页面
function push(path) {
window.location.hash = path;
}
特点：
# 后面的内容不会发送给服务器- 兼容性好，IE8+ 都支持
- 刷新不会 404
- URL 较丑
History 模式
URL 干净：example.com/home
原理：HTML5 History API
// 改 URL 但不刷新页面
history.pushState({ path: "/home" }, "", "/home");
// 监听后退
window.addEventListener("popstate", (e) => {
const path = e.state?.path || "/";
render(path);
});
// 完整跳转
function push(path) {
history.pushState({ path }, "", path);
render(path);
}
// 替换当前记录
function replace(path) {
history.replaceState({ path }, "", path);
}
问题：需要服务端配置
刷新 http://example.com/home 时
浏览器 ──GET /home──> 服务器
│
没有这个文件，返回 404
│
浏览器显示 404 页面
服务端配置（Nginx）：
location / {
try_files $uri $uri/ /index.html;
}
保证：
/home 存在 → 返回文件/home 不存在 → 返回 index.html，让前端路由处理
总结
| 模式 | 原理 | 服务端配置 |
|---|
| Hash | hashchange | 不需要 |
| History | pushState | 需要 |
| Abstract | 内存 | 不需要 |
推荐：开发用 History，生产看服务器情况配置。
