Remove query item from router

user_16532007 0
Viewed 601

I'm using replace in vue to add query to the current url . and i assigned undefined if the value is not there.

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

this makes the query item disappear from the URL when the query data is getting updated which is fine.

it does not remove it from the query object.

any idea if there's a better approach than this?

plus is it possible to get the query as it is from the route? like &limit=10...etc

vue-router vuejs2 nuxt.js vue.js javascript
1 Answers

If I understand correctly, the OP wishes to manipulate the query object passed to router.replace. It can be done with standard js.

Start by explicitly naming a query variable...

let query = $router.query;

To remove something, use js delete operator. For example, to remove query.limit...

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

Or, if you're building that query, don't put limit in in the first place...

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

Do any of these manipulations, then pass to the router referring to the variable...

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

To restate as a string, there are probably several methods, including many in libraries you might have around, but natively...

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