Removing query string parameter from Url

Question

Coming from AngularJS I thought this would be easy enough in Vue.js 2 as well. But it seems this is difficult by design in Vue.

In AngularJS I can do this $location.search('my_param', null); which will effectively turn https://mydomain.io/#/?my_param=872136 into https://mydomain.io/#/.

In Vue I have tried this.$router.replace('my_param',null);, but it will only do https://mydomain.io/#/?my_param=872136 -> https://mydomain.io/#/my_param, leaving the empty my_param.

Isn´t there anyway in Vuejs2 to remove the query params from the Url? Should I resort to plain JS to achieve this?

Answer 1

In the case that you have multiple query parameters the correct way to remove one of them would be:

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

Answer 2

router.replace() is to navigate by removing the current URL from the browser history stack and replace it with the argument route you pass to it.

The actual syntax is router.replace(url_location, onComplete, onAbort).

What you are doing is router.replace(my_param, null) which is removing the current URL from the history stack and replacing it with 'my_param' and for the onComplete callback you are passing a null

So do it like this:

this.$router.replace('/')

More info on programatic navigation