How to remove one query string from url?


I am using the code below to append query strings as needed to the url

this.$router.push({ query: Object.assign({}, this.$route.query, { color }) });
this.$router.push({ query: Object.assign({}, this.$route.query, { size }) });

each query param correspond to a set of checkboxes and if none are checked then the respective query param should be removed from the url

I have looked into this.$router.replace() but I’m not sure if it is what I need.

Anyone have any suggestions?


I just figured it out

let query = Object.assign({}, this.$route.query);
delete query.color;
this.$router.replace({ query });

this may not be the best way of doing it but it works for my case


This one updates or deletes the search param. undefined is key here, null or other falsy value doesn’t behave the same!

  query: {
    search: || undefined,


This approach does seem to work and is quite simple. But we’ve encountered a problem with it in the past.
When you assign undefined to a query, it does gets removed from the URL but it remains in the $route.query object as a property.
This could be problematic when using router-link component’s exact prop.
I encourage using @mountainman’s solution based on personal experience.