Vue Router修改query调用router.push()后URL不更新的原因咨询

核心原因在于**useRoute()返回的route是Vue Router内部维护的响应式对象，绝对不能直接修改它的属性**，具体拆解：

• 第一种方式的逻辑是合规的：
  先深克隆route.query得到完全独立的普通对象newQuery，修改这个独立对象后调用router.push()。此时newQuery和框架内部的路由状态没有绑定，router.push能正确识别参数变化，触发URL更新。

• 第二种方式直接踩了Vue Router的禁忌：
  你先修改了route.query.keyword = undefined，这一步直接篡改了框架内部管理的路由状态。虽然之后深克隆得到的newQuery打印结果和第一种一致，但此时Vue Router内部的route对象已经处于异常状态——它会认为当前的query和你要推送的newQuery没有差异（因为你提前修改了内部的query值），所以不会触发URL更新。

记住：所有路由参数的修改，都必须基于原始路由参数创建新对象，再通过router.push/router.replace这类官方API来操作，永远不要直接修改route对象的任何属性。

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