动态更新vue路由器中的查询参数

Question

为什么一种方法有效而其他方法无效。 （网址未动态更新）

我想从 URL 中删除 parm2

URL：http://localhost/testpage?parm1=xyz&parm2=xyz&parm3=xyz

不起作用（输出：http://localhost/testpage?parm1=xyz&parm2=xyz&parm3=xyz）

const query = this.$route.query;
delete query.parm2;
this.$router.replace({ query: query } );

工作（输出：http://localhost/testpage?parm1=xyz&parm3=xyz）

this.$router.replace({ query: {parm1: 'xyz', parm3: 'xyz'} );

Answer 1

const query = this.$route.query

创建对内存中同一对象的引用，因此当您

delete query.parm2

时，您可以直接修改 vue-router 数据。这会干扰 vue-router 跟踪当前路由参数实际内容的能力。 您需要先克隆该对象，然后再删除。

const query = { ...this.$route.query };
delete query.parm2;
this.$router.replace({ query: query });