In Safari, routing to <GmapMap> creates unintended window.history.state

[byeokim]

In Safari (both macOS and iOS versions), routing to a route containing <GmapMap> component for the first time, it works as expected. However, routing to the route for the second time using Safari's Back/Forward buttons, it doesn't work as expected: it creates additional window.history.state.

Link to reproduction

https://jsfiddle.net/nuacb10j/
(if Google Maps JavaScript API key doesn't work, please try again with your own API key)

Steps to reproduce

At /,

1. Click /foo
2. Click Safari's Back button
3. Click Safari's Forward button
4. Click Safari's Back button

Expected behavior

Navigate to /

Actual behavior

Navigate to /foo (another /foo which was created after step 3)

Additional infomation

• In the steps to reproduce, clicking /home instead of /foo works as expected. (/home doesn't contain <GmapMap> component)
• In Chrome it works as expected.

[Rombusevil]

Did you find a workaround for this @byeokim ?

[byeokim]

No, I couldn't. Are you experiencing the same issue, @Rombusevil?

[xkjyeah]

Have you tried wrapping your <router-view> inside a <keep-alive>?

i.e.

<keep-alive><router-view/></keep-alive>

[byeokim]

It solved the issue. Thank you for your suggestion.

What about you, @Rombusevil ?

[jiangtaste]

Have you tried wrapping your <router-view> inside a <keep-alive>?

i.e.

<keep-alive><router-view/></keep-alive>

It's works!

I even checked all docs about vue & vue-router, and created so much DEMO to debug this issue these days.
Thank u so much, you save me...