History bug with beforeEnter guards on Chrome 87

[AlexandreBonaventure]

Version

4.0.1

Reproduction link

https://codesandbox.io/s/modest-nightingale-j7uzx

Steps to reproduce

https://github.com/AlexandreBonaventure/vue-router-history-bug

So I realized this bug only happens on my Chrome browser after putting up the repro.
The codesandbox link won't highlight the bug because of the sandbox environment.
So you need to clone the repo and run yarn && yarn dev to boot dev server.
You'll land on:

1. localhost:3000/organizations
2. Click on 'Go to Details'
3. URL should now be localhost:3000/organizations/0/settings
4. Click 'Back'

What is expected?

URL should be localhost:3000/organizations because we went back in the history.

What is actually happening?

On Chrome 87, 5. URL is stuck with localhost:3000/organizations/0/settings

---

Screen recording https://we.tl/t-o0WVJVIlet

[posva]

The problem is your navigation guard also gets executed when going back in history, but the param isn't present, so it aborts going back and creates a new navigation, staying where you are. You need to ensure the param only on the routes that need it (there was also a typo on the param):

router.beforeEach((to, from) => {
  if (to.name === 'organization-settings' && !to.params.id) {
    const { name, path, query, params, fullPath } = to
    // console.log(to, from);
    console.log('Full Path', fullPath)
    return { name, query, params: { ...params, id: '1' } }
  }
})

That being said, since the param is required, such a guard doesn't make sense, I'm not sure what you are trying to achieve here...

The good thing is this helped me find a different bug that validates the navigation when going back even though it shouldn't, making from have an invalid value the second time you hit back. Thank you for that!

Edit: After more investigation, I'm realizing this happens because vue router restores the navigation going forward in history and then triggers the redirect because of the navigation guard. But we have no way to wait for the history.go(delta) before calling the redirect of the push, resulting in a race condition between history.go() and the router.push(). I removed the call to history.go() because it doesn't make sense if the user is redirecting somewhere. This allows them to still go back in history to try again (in case of logging in for example)