适用读者：配过路由但被"刷新 404"坑过的人。
前置：S14-B02。
覆盖旧文：1492(29) 1494(43) 335(114) 1493(52) = 238 点。
覆盖扩展：E-S14-007（history vs hash）。
上一篇：S14-B05 · 工程化入门：Vite 与路径别名
下一篇：S14-J02 · 打包分析。

---

1. 一句话结论

两种模式的核心差别是"URL 长什么样"和"服务端要不要配合"：hash 不用后端支持，history 更干净但必须配 fallback。

模式	URL	刷新行为	后端要求
hash	/#/user/1	不会 404（# 后不发请求）	无
history	/user/1	会 404（服务端没这个路径）	需 fallback 到 index.html

"刷新 404"的根因：/user/1 是一个真实 HTTP 请求，服务端没有这个资源 → 必须所有路径都返回 index.html，由前端路由接管。

---

2. 两种模式的取舍（E-S14-007）

维度	hash	history
SEO	较差（部分爬虫忽略 #）	好
URL 美观	差	好
部署	静态托管即可	需 rewrite 配置
兼容性	极好	现代浏览器

nginx fallback 写法：

location / { try_files $uri $uri/ /index.html; }

判据："能改服务端配置吗？" 能 → history；不能（GitHub Pages 之类要特殊处理）→ hash。

---

3. 路由进阶三件事

能力	用途
动态路由 /:id	详情页
嵌套路由 children	布局 + 子页面
路由守卫 beforeEach	登录校验、权限

router.beforeEach((to) => {
  if (to.meta.requiresAuth && !isLoggedIn()) return '/login'
})

"守卫里能做异步吗"：可以（返回 Promise/await），但不要在里面做重业务——会阻塞导航。

---

4. 懒加载路由（首屏关键）

{ path: '/user', component: () => import('./User.vue') }

效果	说明
首屏只加载首页 chunk	体积变小（J02）
访问时才下载	多一次网络请求

判据："这个页面是首屏需要的吗？" 不是 → 懒加载。

---

5. 五个误区

误区	真相
"history 模式不需要后端配置"	必须有 fallback
"hash 模式不能被爬虫抓"	部分能，但支持差
"守卫里可以随便写异步"	会阻塞导航
"所有路由都该懒加载"	首页懒加载会拖慢首屏
"路由参数变化会重建组件"	默认复用，需 watch 参数

---

6. 自检

1. hash 与 history 的三个差异？
2. 刷新 404 的根因与解法？
3. 路由守卫能做什么、不该做什么？
4. 懒加载对首屏的影响？
5. 路由参数变化时组件会重建吗？

---

7. 下一篇

S14-J02 · 打包分析：找出最大的 JS

路由讲完，下一篇拆产物：66 KB 里到底有什么（实测 vendor 占 97%）。

---

本篇属于系列《S14 · 前端与可视化》。旧文来源：A-1492/1494/335/1493；扩展点 E-S14-007。