<p>直接将 Vue Router 的 mode 设为 'history' 可去除 URL 中的 # 号，但必须同步配置服务器 fallback（如 Nginx 的 try_files $uri $uri/ /index.html）并添加前端通配符路由 { path: '*' }，否则刷新或直链访问深层路由将返回 404。</p>
直接把 Vue Router 的 mode 设为 'history' 就能去掉 URL 中的 # 号，但光改前端配置不够——必须同步处理服务器行为和 404 回退逻辑，否则用户刷新页面或直接访问深层路由会返回 404。
一、前端：启用 history 模式
在 src/router/index.js（或你定义路由的文件）中，创建 Router 实例时明确指定 mode: 'history'：
- 确保已安装
vue-router（如未安装：`npm install vue-router`） - 删除或注释掉原有 hash 模式下的冗余写法（例如带
#!的路径或手动操作window.location.hash） - 若项目部署在子目录（如
https://example.com/myapp/），需额外配置base: '/myapp/'
二、服务端：必须支持 fallback
单页应用没有真实存在的 /user/123 文件，所有路由都由前端接管。因此服务器收到任何非静态资源请求时，不能返回 404，而应统一返回 index.html，交由 Vue Router 解析路径。
- Nginx 示例：在 location 块中添加
try_files $uri $uri/ /index.html; - Apache 示例：启用
mod_rewrite，添加RewriteRule ^(.*)$ /index.html [L]到.htaccess - Vercel/Netlify：分别通过
vercel.json或_redirects配置重写规则 - 本地开发用 vue-cli-service：默认已内置 history 模式代理支持，无需额外配置
三、兜底：前端处理未匹配路由
服务器把所有请求都转给了 index.html，意味着它不再主动返回 404。你要在 Vue 路由里显式捕获无效路径，展示自定义 404 页面：
立即学习“前端免费学习笔记（深入）”；
- 在
routes数组末尾添加通配符路由：{ path: '*', component: () => import('@/views/NotFound.vue') } - 避免使用
path: '/404'这类固定路径，否则用户访问/xxx不会自动跳转 - 如需服务端也返回标准 HTTP 404 状态码，需后端配合做路径白名单校验（非必须，但利于 SEO 和监控）
四、注意事项与兼容性
history 模式依赖浏览器的 pushState 和 popstate API，现代浏览器均支持，但仍有细节需留意：
- IE10+ 支持，IE9 及更早版本不支持，此时 vue-router 会自动降级回 hash 模式（前提是配置了
fallback: true） - 部署到非根目录时，
base必须与实际访问路径一致，否则路由匹配失败或静态资源加载 404 - 服务端配置错误是导致“刷新即 404”的最常见原因，优先检查 Nginx/Apache 日志或网络面板中的 HTML 请求状态码
