Vue3中router.push删除query参数未触发路由监听的原因及方案

出现这个问题的根本原因有两个：

• useRoute()返回的route对象是只读的响应式代理，所有直接修改route属性的操作（比如你最初写的route.query.keyword = undefined）都是非法操作。Vue Router 内部会拦截这类修改，同时这类非法修改会污染路由内部的状态对比逻辑，导致路由判定「传入的新query和当前query完全一致」，直接跳过本次导航，自然不会触发watch回调，也不会更新页面。
• Vue Router 内部序列化query参数时，值为undefined的键会被直接从最终URL参数中移除。你最初的写法是先修改原route对象再传展开后的query，本质是把污染后的原query对象传给了push，路由对比新旧状态时检测不到差异，就不会执行导航；而你额外加a:1属性时，新旧query出现了可检测的差异，路由才会执行导航流程，这时候才会同步你之前修改的keyword值，属于歪打正着的效果。

你后来用的临时写法之所以能生效，核心原因是你没有直接修改原route.query对象，而是在展开生成的新对象上设置keyword: undefined，传给push的是一个全新的普通对象，没有污染原route状态，路由能正确识别到「需要移除keyword参数」的变更，才会正常执行导航。

不要直接修改只读的route对象，构造新query时显式排除要删除的参数即可，这种写法语义更清晰，也完全规避了状态污染问题：

const removeKeyword = function () {
  // 解构时直接排除要删除的keyword参数，保留其余所有query参数
  const { keyword, ...restQuery } = route.query
  // 如果不需要保留这次操作的浏览历史，把push换成replace体验更好，避免用户点返回回到带keyword的状态
  router.replace({
    name: 'search',
    query: restQuery
  })
}

额外的注意事项：

• 所有路由参数的增删改，都必须通过router.push/router.replace传入全新构造的普通对象实现，永远不要直接赋值修改route对象下的任何属性，避免触发未定义的状态异常。
• 监听query变化时建议加上deep: true配置，避免嵌套参数变化时watch不触发的问题：

watch(
  () => route.query,
  () => {
    searchStore.getSearchList(route.query)
  },
  { immediate: true, deep: true }
)

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