vue路由器无法删除查询

Question

我尝试通过单击按钮删除查询参数。

例如我的路线是

http://localhost:8080/#/myroute?dialog=1

。 现在我单击一个按钮，该按钮应该删除查询部分

?dialog=1

。

我的点击函数如下所示：

delete_query() {
  this.$router.replace({ query: null });
}

我也尝试过这个尝试：

delete_query() {
  this.$router.push({ query: null });
}

delete_query() {
  this.$router.push({ name: this.$route.name });
}

但是所有这些函数都给了我同样的错误：

Uncaught (in promise) Error: Redirected when going from "/myroute?dialog=1" to "/myroute" via a navigation guard.

为什么？ 我做错了什么？我该如何解决这个问题？

我安装了vue router的实际版本3.5.1。

Answer 1

这个 Vue3 路由器选项有效。

router.push({ query: undefined})

TS：

Type 'null' is not assignable to type 'LocationQueryRaw | undefined'

Answer 2

如果我做对了，要删除 javascript 对象属性，您可以使用 javascript 的删除属性。像这样。

    delete_query() {
 delete this.$router.query // will delete all router queries 
 delete this.$router.query.name // will delete only name property.
}