4

My App.vue has the following setup:

// App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

And Home.vue has link to Gmap.vue:

// Home.vue

<template>
  <div>
    <router-link to="/gmap">vue2-google-maps</router-link>
  </div>
</template>

And Gmap.vue has <GmapMap> component from vue2-google-maps:

// Gmap.vue

<template>
  <div>
    <GmapMap :center="{lat: 0, lng: 0}" :zoom="10">
    </GmapMap>
  </div>
</template>

Finally router.js is like this:

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/gmap",
      name: "gmap",
      component: Gmap
    }
  ]
})

In Safari, at path /, when click <router-link>, Safari navigates to /gmap and puts /gmap path into Safari's window.history. So clicking Safari's back button will make Safari navigate back to /.

Then clicking <router-link> again will make Safari navigate to /gmap. However, at this time Safari will put /gmap path into Safari's window.history twice (first /gmap and second /gmap). So clicking Safari's back button won't make Safari navigate to /. Instead, Safari will navigate to the first /gmap.

I confirmed that:

  • when Safari went back and forward between first /gmap and second /gmap, popstate event wasn't triggered, and Vue Router didn't catch the changes so none of Navigation Guards were invoked.
  • this happens in Safari (macOS 10.13.6 and iOS 11.4.1)
  • this doesn't happen if routing to components that don't contain <GmapMap> component
  • this doesn't happen when routing without Vue Router
  • this doesn't happen in Chrome 67 (macOS 10.13.6 and iOS 11.4.1)

Why does Safari put same path twice?

sortofimport
  • 796
  • 6
  • 12

1 Answers1

0

Though not an exact answer, to solve the issue wrap <keep-alive> around <router-view> in App.vue:

// App.vue

<template>
  <div id="app">
    <!-- Note that <router-view> is wrapped by <keep-alive> -->
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

Source: GitHub discussion.

sortofimport
  • 796
  • 6
  • 12