SPA的404由前端路由兜底，需配置末位通配符路由：Vue Router用path: '/:pathMatch(.*)*'，React Router v6用path="*"；部署时须服务端配置fallback（如Nginx的try_files），并增强用户体验如拼写提示、埋点和API验证。
在 SPA 应用中，404 页面不是由后端返回的 HTTP 状态码决定的，而是前端路由“找不到匹配路径”时的兜底行为。关键在于：路由系统必须显式配置一个通配符路由（如 * 或 /404），且它要放在所有具体路由之后，否则会提前拦截其他合法路径。
Vue Router 中的正确 404 配置
使用 createRouter 时，把通配符路由作为最后一条规则：
- 路径写成
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFoundPage }（Vue Router 4 推荐写法），利用pathMatch参数捕获任意嵌套路径 - 确保该路由对象排在所有
children和routes数组末尾，顺序错误会导致其他页面无法访问 - 组件内可通过
useRoute().params.pathMatch获取原始未匹配路径，用于日志或重定向判断
React Router v6+ 的 404 处理方式
v6 移除了 <Switch>，改用 <Routes> + 顺序匹配，因此：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 在所有
<Route>后添加<Route path="*" element={<NotFound />} /> - 不要写成
path="/*"—— 这是无效写法；*本身已代表“任意剩余路径” - 如果用了
useNavigate()手动跳转到 404，建议统一走navigate('/404', { replace: true })，避免 URL 留下错误路径
防止服务端返回真实 404 的陷阱
SPA 部署后，用户直接访问 /user/123 刷新页面，如果服务器没配置 fallback，会返回 404 HTTP 状态。这不是前端能解决的，需配合服务端：
- Nginx：添加
try_files $uri $uri/ /index.html;，让所有非静态资源请求都返回index.html - Vercel/Netlify：默认支持 SPA fallback，无需额外配置
- 自建 Node.js 服务（如 Express）：在静态资源中间件后加
app.get('*', (req, res) => res.sendFile(path.join(__dirname, 'index.html')))
增强用户体验的小细节
纯跳转 404 页面还不够，可补充这些逻辑：
- 在
NotFound组件中检查当前路径是否含常见拼写错误（如/deshboard→ 提示“是否想访问 /dashboard？”） - 记录未命中路径到埋点系统，帮助发现失效外链或旧版文档引用
- 对带参数的非法路径（如
/post/abc）尝试调用 API 验证是否存在，再决定展示“内容不存在”还是真 404
