如何在Master Detail页面重置搜索项？清除切走返回的残留搜索值

残留值的本质是Master Detail页面被路由缓存、组件状态没有被销毁，之前跳转传入的搜索参数、绑定的搜索值被长期保留，只需要在页面离开/失活的时机做状态重置，完全不会影响原有带参跳转搜索的正常功能。

具体实现方法 #

• 借助路由生命周期钩子触发状态重置
  主流前端路由系统都提供了离开当前路由的触发回调，在回调里直接清空所有和搜索相关的绑定变量即可：
  • Vue + Vue Router 场景：如果页面被keep-alive缓存，在deactivated钩子里执行搜索值、搜索结果的重置操作，比如把绑定的搜索关键词变量、表格列表变量重置为空；如果是未被缓存的页面，用beforeRouteLeave钩子实现同样的重置逻辑
  • React + React Router 场景：在组件的useEffect中监听路由路径变化，在路由切走的清理函数里执行搜索状态清空，比如重置搜索关键词状态、清空已加载的搜索结果列表

  注意：不要直接用普通的组件销毁钩子做重置，被keep-alive缓存的组件切走时不会触发销毁逻辑，很容易出现重置失效的问题

• 隔离路由参数和页面内部搜索状态
  很多残留问题来自把路由传入的搜索参数和页面内部的响应式搜索变量做了常驻绑定，可以调整绑定逻辑：路由传入的搜索参数仅作为首次触发搜索的一次性入参，参数读取完成后立即清除路由上对应的query字段，不让旧参数长期留在路由记录里。这样用户再次通过导航返回页面时，路由里没有残留的旧搜索参数，就不会自动加载旧的搜索结果。
• 给返回导航加主动校验拦截
  给Master Detail页面的自动搜索逻辑加个判断条件：只有当当前路由携带明确的搜索参数时，才自动触发搜索逻辑；如果是用户手动从其他页面导航返回、路由没有携带任何搜索参数，就直接清空搜索框，加载全量列表数据，跳过自动搜索的流程。

内容的提问来源于stack exchange，提问作者Goku