专题归档 · 2025 年 9 月（编辑分组，非实际写作日期）

实习排障：切换聊天会话，为什么整个侧边栏又加载一遍？

Vue Router 的 key 如何导致父组件重复挂载和列表接口重复请求。

现象不只是 API 多了一次

切换聊天会话后，ChatHistory 侧边栏组件发生重复挂载与卸载，随后又触发请求加载会话列表。理想情况只是聊天内容区跟着路由参数切换，外层布局和历史侧栏不应该每次重建。

排查材料把注意力从列表请求转向根路由视图的 key。原先将整个 route 对象作为 key，在子路由参数变化时也会让组件拥有新的身份，父级布局因此被销毁和重建。

后来我考虑用稳定的父路由匹配路径作为 key：父级路由不变，ChatHistory 可以保留；只有更内层的 ChatArea 更新。它还比较了按完整 path、按 name，以及不自定义 key 等做法。

路由 key 不是越固定越好。关键在于哪些组件需要随路由参数更新，哪些组件应该保留状态，不同层级可能需要不同策略。