vuejs this.$route issue with address bar

Question

When I remove a parameter, It does not take effect in address bar. I tried following line to remove parameter from URL.

delete this.$route.query[parameter_name];

See below url, Notice following things.

1. In console query object is empty but address bar having all parameters.

2. I tried following lines to remove applicants and branches parameters from URL. It only effected in console as you can see query object is empty but URL is still there.

delete this.$route.query['applicants'];

delete this.$route.query['branches'];

But still address bar is having all removed params.

donate#/?applicants=Female&branches=2207962

Answer 1

This will work with $router.push or $router.replace to clear the query string.

Clear the query string inside a component lifecycle hook.

mounted() {
  this.$router.replace({ query: { '': null } });
}

Clear the query string on redirect.

$router.push({ path: 'url-path', query: { '': null } })
$router.replace({ path: 'url-path', query: { '': null } })

Remove old query string values and replace with new values.

$router.push({path: 'url-path', query: {'': null, lastname: 'Ever', firstname: 'Greatest'}})
$router.replace({ path: 'url-path', query: { '': null  token: 'coolToken' })

Answer 2

Using delete will delete the property but will not update the address bar. You need to specify a redirect programmatically. See Programmatic Navigation.

You can use

this.$router.push('donate')

Or

this.$router.replace('donate')

to replace the current history entry (see comment from @thanksd)