Vue Router动态更新Query参数：为何一种方法有效另一种无效？

核心原因是Vue Router对query参数的变更检测依赖对象引用的变化，且$route.query是只读的响应式对象，直接修改它不会触发路由更新。

第一种方法失效的原因 #

• this.$route.query是Vue Router注入的响应式只读对象，直接执行delete this.$route.query.parm2只是修改了这个响应式对象的属性，但并没有生成新的对象引用。
• 当调用this.$router.replace({ query: this.$route.query })时，Vue Router内部会对比新旧query对象的引用，发现是同一个对象，就会判定参数没有发生变更，因此不会触发URL的更新。
• 另外，直接修改$route的属性本身就违反了Vue Router的设计规范，$route对象应该被视为只读，不应直接修改。

第二种方法生效的原因 #

• 传入的是一个全新的普通对象（仅包含parm1和parm3），这个对象和原来的$route.query没有引用关系。
• Vue Router能检测到query参数的引用变化，进而识别出参数已修改，因此会正确更新URL，移除parm2。

修正第一种方法的正确写法 #

如果想基于原query修改，需要先创建一个新对象（解除和原$route.query的引用绑定），再修改后传入replace：

// 解构原query生成新对象
const newQuery = { ...this.$route.query };
// 删除不需要的参数
delete newQuery.parm2;
// 调用replace更新路由
this.$router.replace({ query: newQuery });

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