去除路由器中的查询项

Question

我正在使用Vue中的replace方法将query添加到当前URL中。 如果值不存在，我将其赋值为undefined。

this.$router.replace({
  name: "admin-frs",
  query: {
    limit: this.pageSize,
    page: this.currentPage,
    sort: this.sortbyapi || undefined,
    language: this.sortbyapiLang || undefined,
  },
})

当查询数据更新时，这将使查询项从URL中消失，这是可以接受的。

但它不会从查询对象中删除它。

有没有比这更好的方法呢？

此外，是否可能从路由中获取查询项，就像&limit=10...etc这样？

Answer 1

如果我理解正确，OP希望操作传递给router.replace的查询对象。可以使用标准的js来实现。

首先，明确命名一个查询变量...

let query = $router.query;

要删除某个属性，可以使用js的delete运算符。例如，要删除query.limit...

// 删除limit属性
if (!this.pageSize) delete query.limit;

或者，如果你正在构建该查询，可以一开始就不添加limit属性...

let query = {};
if (this.pageSize) query.limit = this.pageSize;
if (this.currentPage) query.page = this.currentPage;
// 其他属性也是类似的处理
// query现在只包含上述选择的属性

进行任何这些操作后，将变量传递给路由器...

$router.replace({ name: "admin-frs", query });

要将其转换为字符串，可能有几种方法，包括许多您可能拥有的库中的方法，但原生的方法是...

let params = [];
for (let key in query)
  params.push(`${encodeURIComponent(key)}=${encodeURIComponent(query[key])}`);
const queryString = params.join("&");