Remove query items from router

Question

I am using the replace method in Vue to add query to the current URL. If the value doesn't exist, I assign it as undefined.

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

This will cause the query items to disappear from the URL when the query data is updated, which is acceptable.

But it does not remove it from the query object.

Is there a better way than this?

Also, is it possible to get the query items from the route, like &limit=10...etc?

Answer 1

If I understand correctly, the OP wants the operation to be passed to the query object of router.replace. Can be implemented using standard js.

First, explicitly name a query variable...

let query = $router.query;

To delete an attribute, you can use the js delete operator. For example, to delete query.limit...

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

Alternatively, if you are building this query, you can not add the limit attribute at the beginning...

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

After doing any of these operations, pass the variables to the router...

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

To convert it to a string, there are probably several ways, including those from many libraries you may have, but the native way is...

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