404跳转失败主因是路径解析偏差或服务端配置缺失：相对路径受当前url和base标签影响，history模式需服务端fallback，同域路由冲突、缓存及service worker也会干扰跳转。
直接跳转出 404，大概率不是页面写错了，而是路径解析或服务端配置出了偏差——浏览器按当前 URL 拼出来的地址，和你心里想的地址根本不是一回事。
location.href 跳转拼出错：相对路径在不同页面下行为不一致
比如你在 /admin/ 页面里写 location.href = "user/profile"，浏览器会请求 /admin/user/profile；但你要的是 /user/profile。这种“心口不一”是前端跳转 404 最高频原因。
- 优先改用绝对路径：
location.href = "/user/profile"（开头带/） - 动态拼接时别手算，用
new URL("user/profile", window.location).href安全构造 - 检查当前页面完整 URL（看浏览器地址栏），再心算一遍相对路径拼接结果，比猜快得多
- 如果用了
<base href="/subapp/">，所有相对路径都会被它劫持，必须确认其值与构建配置（如 Vite 的base或 CRA 的homepage）完全一致
History 模式刷新 404：服务端没 fallback，前端路由根本没机会启动
Vue Router / React Router 开启 history 模式后，/about 这种地址看起来正常，但刷新时浏览器会直接向服务器要 /about 这个路径。如果 Nginx、Apache 或托管平台没配 fallback，就真返回 404 —— 因为磁盘上压根没有 ./about.html 这个文件。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Nginx 必须用
try_files $uri $uri/ /index.html;，不能只靠error_page 404 /index.html（后者会改 URL，前端拿不到原始路径） - Netlify 需在
netlify.toml中写[[redirects]] from = "/*" to = "/index.html" status = 200；用_redirects文件不支持status = 200的 rewrite 语义 - Vercel 默认支持，但自建服务几乎一定需要手动配置
- 本地测试时，
vite preview或http-server -s是安全的；裸跑http-server就会暴露问题
跳转被后端拦截：同域下 API 路由和前端路由撞车了
前后端共用一个域名（比如都走 https://api.example.com），而你前端跳转到 /order/list，后端 Express 或 Spring Boot 恰好定义了同名接口，请求就会被后端直接响应 JSON 或 404，前端路由连初始化的机会都没有。
- 打开浏览器 Network 面板，看 404 请求的
Response Headers中Content-Type是text/html还是application/json - 如果是后者，说明后端提前吃了这个请求，得调整后端路由顺序，或给前端路由统一加前缀（如
/app/order/list） - 查后端日志，确认该路径是否真有 handler 在运行，还是只是个空壳路由
404 页面本身跳转失效：缓存、Service Worker 和 DOM 时机全在捣乱
你以为写了 location.href = "/" 就能跳首页？在 404 页面上，它很可能被缓存、Service Worker 或执行时机卡住。
- 用
location.replace("/")替代location.href，避免用户点「返回」又回到错误页 - 不要在
里执行跳转，DOM 可能未就绪；包裹在DOMContentLoaded事件里，或直接放底部 - 如果用了 PWA，检查
service-worker.js是否把 404 响应缓存了——缓存的 HTML 里 JS 逻辑可能被忽略 - 服务端必须返回真实
404状态码，不能是200+ 自定义文案，否则搜索引擎当正常页收录，跳转逻辑也可能被绕过
最常被忽略的一点：404 不是前端能单方面解决的状态码。它本质是服务器对“找不到资源”这一事实的明确声明。前端能做的，只是让路径拼得更准、fallback 配得更稳、跳转时机抓得更牢——但最终那个 404 Not Found 响应头，永远由服务端决定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
