Vue Router排障：刷新、404、竞态与提交

前置：history模式、开发代理和TaskPage的读取生命周期。按完整任务工作台中的路由表、api.mjs和TaskPage.vue逐层核对。示例未执行；命令与现象均为读者未来自行验证的步骤和预期，不能视为运行记录。

Vue Router详情页刷新404如何处理

Vue Router详情页刷新404如何处理？createWebHistory使用浏览器history API，客户端点击由路由器处理，但刷新/tasks/12时服务器直接收到该路径。静态服务器应正常返回真实资源，把/api交给后端，其余页面路由返回index.html，客户端再判断是否匹配。不能把/api的404也改写成HTML200，否则fetch会在JSON解析时失败并掩盖真实错误。

本例仅根目录部署；子目录还需同步Vite base、createWebHistory(base)和服务器回退位置。Vite server.proxy只在dev有效，preview和生产需要另设同源反向代理。官方HTML5 history模式提供服务器配置思路，读者应在目标服务器验证，不能把模板编译当部署验证。

Vue路由404和任务API404有什么区别

Vue路由404和任务API404有什么区别？页面404表示URL没有匹配到任何前端记录，由兜底NotFound展示；任务404表示URL结构合法但后端没有该任务，由TaskPage显示任务不存在或已删除。格式无效的id由前端先拦截，合法但不存在的id交后端判断。不要把所有情况重定向列表而丢失错误上下文。

如果看见Unexpected token或HTML，检查开发代理、生产反向代理与history回退是否把API错误替换成页面；检查Content-Type及实际响应体。request在非2xx时保留HTTP状态并给通用解析回退，但成功HTML仍会解析失败，最终页面显示错误。静态契约只表达预期路径，不能证明代理已正确部署。

Vue切换地址后仍显示旧任务如何排查

Vue切换地址后仍显示旧任务如何排查？先确认读取是否只在mounted执行；复用组件时必须watch具体参数。再检查读取前是否清旧task和草稿、每次请求是否递增generation、成功/失败/finally是否都校验当前序号、onCleanup是否及时注册。只在成功赋值前比较id会遗漏同任务重试与编辑模式变化，序号比单独比较id更完整。

AbortController只覆盖传入signal的读取；写入完成后也要校验generation再导航。不要用随机延时隐藏竞态，也不要吞掉全部异常使页面永久loading。人工验收要控制慢请求和快速切换顺序，静态阅读只能提供实现依据，本轮没有真实浏览器竞态证据。

Vue提交失败后应该重试还是重新加载

Vue提交失败后应该重试还是重新加载？409需要重新加载当前版本再编辑；400先修正输入；404提示任务已删除；网络错误则可能已提交，先核实服务端状态。POST没有幂等键，盲目重试可能重复创建。按钮saving阻止当前视图重复点击，但不能保证跨窗口、刷新或网络层恰好一次。

重新加载明确丢弃草稿，不在错误发生后悄悄覆盖输入。保存期间离开页面，旧请求仍可能提交，但其完成后的UI动作被generation挡住；返回任务应再次读取。服务端必须执行版本保护，前端按钮禁用只是交互约束。部署、浏览器、可访问性与真实并发验收都留给读者未来独立验证，本轮仅静态检查。

练习：拆解三种失败

①直接刷新/tasks/12得到服务器404；②点击/tasks/12得到任务不存在；③API返回HTML200，页面显示JSON解析错误。分别定位到哪一层？有人建议把所有未知路径都回退index.html，这会解决全部问题吗？

参考答案（推演，未执行）

①静态服务器缺history回退，需页面路由返回入口。②前端路由已匹配，后端资源不存在，应保留资源404上下文。③常见为/api代理或回退配置错误，把API路径送到SPA入口；先检查响应Content-Type与实际体。所有未知路径无条件回退会掩盖API404和缺失静态资源，不能解决后端资源不存在；应保留/api后端处理和真实静态文件404，只对页面路由回退。