写代码前没理清这三大逻辑？90%的Bug源于导航断层

　　上周四，机房空调又坏了，嗡嗡声混着隔壁运维敲键盘的节奏，像老式硬盘在读坏道。我盯着前台切页跳转时那0.3秒的白屏，突然想起上个月给金融客户补的那个导航链路——他们验收单上写着“路由无异常”，可用户反馈点击「账单明细」进不去「导出PDF」页，连埋点都没触发。我原以为是React.memo用猛了，结果debug到凌晨两点，发现是header里一个被注释掉的useEffect残留了history.listen监听，但只监听了push，没管replace……

　　你猜怎么着？整个三级菜单树，从「资产总览」→「子账户」→「余额明细」，三处入口都挂着同一套router.push逻辑，可偏偏「子账户」页面初始化时偷偷调了一次replaceState把location.key干掉了。用户再点返回？浏览器历史栈里空着呢。这个我敢打包票——我在十二台不同分辨率设备上录了三十七遍复现视频，其中二十一段里用户手指悬停了超过十八秒才点下去。可没人测过“连续点两下”这种事，毕竟需求文档写的是“支持单击跳转”。

　　那天下午三点，王工蹲在茶水间微波炉前热饭，铝箔纸还没撕，电话就响了。他接起来嗯嗯两声，回头冲我喊：“刘总说要加个‘快捷入口’浮层，嵌在所有页右下角。”我说好，顺手打开Figma看原型——那个浮层按钮的跳转路径，在原型稿里标的是/quick-entry，但UI同事昨天在钉钉群发的Sketch链接里，图层名写的是quickEntry（驼峰），而开发自测用的mock接口路径是/api/entry/quick，最后上线部署时Nginx配置写成了/quick_entry。五个地方，四个不一致。当时窗外在下雨，雨滴砸在机房北窗玻璃上，斜着往下淌，像一串没闭合的括号。

　　我说三大逻辑，真不是玄学：第一是用户意图流——ta从搜索框打“发票”，点进来却落在「报销管理」二级页，而「电子发票开具」按钮藏在折叠菜单第三级；第二是系统状态流——比如用户已实名但未绑卡，此时「支付」按钮显灰还是跳弹窗？灰了没提示，跳弹窗又和「设置」页里的绑卡引导文案冲突；第三最要命：导航权限流。某省政务系统上线头三天，72%的404报错集中在/authz/menu/fetch这个接口，后来发现是RBAC鉴权中间件把「区县级报表查看」权限误判为「市级」，导致菜单渲染时直接return null，但页面主体组件照常挂载，结果数据请求全发向了空id的API端点……

文章配图，仅供参考

　　李姐昨天改完权限逻辑跑来问：“要不要在menu-item组件里加个loading skeleton？”我没接话。她桌上那份外卖盒盖没盖严，麻婆豆腐的红油在塑料盖边缘结了层薄膜，反着光。我就盯着那点油光想，当年在杭州城西那个创业公司，我们仨人挤一间没窗的办公室，用纯CSS画了个带呼吸灯效的导航高亮条，动画帧率压到58fps都不肯松口，就为让用户知道“你现在在哪”。现在呢？前端工程化堆了七层抽象，连router.beforeEach里塞个console.log都要走CI审批。可你翻node_modules里那个vue-router包，index.d.ts第182行还写着// DO NOT TOUCH: internal navigation guard stack……

　　其实有个事我一直没跟人讲：去年底做银行App适老化改造，把「转账」入口从首页第二屏挪到语音唤醒后自动唤起的快捷面板里。结果上线第二天，有位76岁的用户打电话来问：“小张啊，那个绿颜色的箭头按钮，按了三次都没反应，是不是我手机坏了？”我们查日志，发现她每次都是点完语音按钮就直接关麦克风——而触发条件里藏着一句navigator.mediaDevices.getUserMedia().then()……没人想过，老年人关麦动作比系统加载快0.4秒。这算Bug吗？不算。算体验断层？也不对。它就静静躺在那儿，像机房墙上那道没修的裂缝，雨季渗水，平时谁也不提。

　　所以别跟我扯什么“导航是交互设计师的事”。你写useNavigate之前，没在纸上画三遍状态跃迁箭头？没让测试同事蒙着眼点三次首页图标看能否直抵目标页？没确认过所有面包屑的href是否真实对应当前路由参数？没有？那就别怪QA提交的Bug列表里，“导航相关”栏占了六十三行，其中五十一行标题带“预期外跳转”。我不信什么自动化回归——上周四下午，我亲眼看见自动化脚本顺利跑过所有菜单点击用例，因为它压根没校验页面title变了没、url参数多出来个&test=1、或者body class里悄悄多了个is-mocked-nav-active……

　　陈默刚给我推了条消息：“新版导航架构评审，下周二9:30，带原型和路由表。”我回了个OK。桌角那杯咖啡凉透了，表面结了层浅褐色的膜。我忽然记起十八年前，在黄龙时代广场那个毛坯办公区，我们用Excel手动维护过一份三百七十二行的菜单路径对照表，每列标着来源渠道、权限组、fallback页、是否支持deep link……现在谁还干这活？没人。都交给插件自动生成。可插件不识人话，它分不清「快速充值」和「快捷充值」是同一功能，也看不懂产品PRD里那句“入口需保持与旧版心智一致”的潜台词。

　　这样吧，明天早上你打开自己正在写的项目，抽三分钟：关掉所有IDE插件，删掉所有mock数据，把浏览器Network面板开成offline模式，然后点一遍主导航栏。别看控制台报错——你就盯着地址栏看。看它跳去哪儿，看参数变没变，看history.length增了几。做完这个，再决定要不要动router.push那行代码。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!