从路由器中删除查询项答案

【问题标题】：Remove query item from router从路由器中删除查询项
【发布时间】：2021-10-19 12:10:59
【问题描述】：

我在 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

【问题讨论】：

我不确定您在这里寻找什么。像这样的东西？ /admin-frs?limit=3&page=1&sort=asc&language=fr从查询对象中去掉什么，又是什么意思？
您能否澄清一下：“...并且我分配了 undefined”，如果该值不存在。未定义分配给什么？什么价值不存在？然后“......它没有从查询对象中删除它”什么没有删除什么？
@kissu 可以说如果this.sortbyapi 为空，则query 对象中的sort 应该从url 和对象中消失
我遇到了你的“问题”。让我试试看能不能找到一个漂亮的解决方案。
哦，所以问题更多是关于如果值是虚假的，如何删除对象中的键值对。因此，使用 lodash 的 pickBy 之类的东西：lodash.com/docs/4.17.15#pickBy 或者像给定答案那样手工制作。路由器在故事中毫无用处。

标签： javascript vue.js vuejs2 nuxt.js vue-router

【解决方案1】：

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

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

let query = $router.query;

要删除某些内容，请使用 js 删除运算符。例如，要删除 query.limit...

// remove the limit
if (!this.pageSize) delete query.limit;

或者，如果您正在构建该查询，请不要一开始就设置限制...

let query = {};
if (this.pageSize) query.limit = this.pageSize;
if (this.currentPage) query.page = this.currentPage;
// etc for the other properties
// query will now only have props for those selected above

执行任何这些操作，然后传递给引用变量的路由器...

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

要重述为字符串，可能有几种方法，包括您可能拥有的库中的许多方法，但在本机...

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

【讨论】：

甚至不知道为什么 OP 会问这个，因为它已经是默认行为，不需要在它上面做任何事情。
@kissu，我认为这就是 OP 需要理解的：路由器 api 不关心查询数据的操作，它只需要一个对象，这取决于调用者和标准 js 来完成这项工作。