route is changed when history.pushState() and history.back() manually

[Senasiko]

Version

4.0.8

Reproduction link

https://jsfiddle.net/4um9abzg/4/

Steps to reproduce

1. click pushState
2. click back
3. look at console

the callback of router.beforeEach is triggered.

but it won't be triggered in vue@2.x and vue-router@3.x

vue-route@3.x link: https://codesandbox.io/s/magical-leaf-mxd4l

What is expected?

the callback of router.beforeEach will not be triggered.

What is actually happening?

the callback of router.beforeEach is triggered.

[edison1105]

Vue Router saves information on the history.state. If you have any code manually calling history.pushState(), you should likely avoid it or refactor it with a regular router.push() and a history.replaceState()

see https://next.router.vuejs.org/guide/migration/#usage-of-history-state

[Senasiko]

@edison1105 , thanks, but it is not what I expected.

// replace
history.pushState(myState, '', url)
// with
await router.push(url)
history.replaceState({ ...history.state, ...myState }, '')

By this way, url and page content will both be changed, but I just want to change the url.

[posva]

I see this rather as a fix and as @edison1105 mentioned you should not be calling history.pushState yourself.

If you want to change the url but not keep the router-view in sync, use the route prop of RouterView