vuejs / vue-router

🚦 The official router for Vue 2
http://v3.router.vuejs.org/
MIT License
19k stars 5.06k forks source link

manually url navigation canceled messes up history #2573

Open bravelincy opened 5 years ago

bravelincy commented 5 years ago

Version

3.0.2

Reproduction link

https://codesandbox.io/s/l9omkjv939

Steps to reproduce

  1. Let's say the page url now is /?animal=dog, and the animal field only accept dot or cat
  2. When a user manually change the dog to duck, or via back button, it triggered next(false) for prevent the url change inside beforeRouteUpdate
  3. Due to the next(false) or next(error) pushed a new location history, the previous record is /?animal=duck and current record is /?animal=dog
  4. Then we click the browser's back button, it turn to the step 2. and I can't go back to the earlier state!

What is expected?

I don't know... how can I handle this scenario?

What is actually happening?

Can't go back via back button after called next(false/error)

posva commented 5 years ago

Not sure what is causing this, but only happing when manually changing the url in hash mode. It doesn't happen with regular navigation

bravelincy commented 5 years ago

@posva I think because the url manually changing in the omnibox forcibly pushed a new history state by the browser's mechanism, when the history back, it always encounter the manually pushed state, and it get stuck