从路由器中删除查询项

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 删除运算符。例如，删除 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("&");

从路由器中删除查询项

Remove query item from router

javascript

vue.js

vue-router

vuejs2

nuxt.js