Vue-router: Allow replacing the URL in routing guards

[mitar]

What problem does this feature solve?

Currently it seems that with next you can only redirect to a new location, but not replace existing location. I would like to validate URLs and for invalid URLs just replace them with a new one. For example, if URL is missing a slug or slug is obsolete, I would like to in-place replace the URL inside the hook, without keeping in the history the invalid URL.

What does the proposed API look like?

next could get a second argument with options. So one could do next('/newlocation', {replace: true}).

[posva]

You actually don't need to add a replace option, when calling next, the _wrong url_ won't be kept in the history, which is a bit surprising, I'll have to dig it a bit more. Edit: I checked and this is intentional
You can already pass replace as an option in the next call: next({ path: '/nelocation', replace: true }). That will replace the previous entry though. You can actually pass the same kind of argument as router.push. This will be clarified in the docs

[mitar]

Thanks. So if I understand correctly, replace: true is already a default, based on what you are saying that the wrong URL is already not kept? So if I then want to keep it, I should pass replace: false?

All that should be documented somewhere.

[adamreisnz]

You can actually pass the same kind of argument as router.push. This will be clarified in the docs

Actually, the API for the router is to use router.replace instead of router.push. Adding replace: true has no effect in the router it seems.

I know this is an old issue, but I found it when investigating this behaviour. I also assumed replace: true would work in the router, but it only seems to work in next().

Quite frankly having 2 different methods is a bit strange, and I don't see why the property can't also work for push. Having to do this is rather silly:

if (replace) {
  this.$router.replace({name: 'route'});
}
else {
  this.$router.push({name: 'route'});
}

6 lines of code for something that could be done in 1:

this.$router.push({name: 'route', replace});