vue.js - Vue Router 在 Safari 中复制 window.history 中的条目

Question

我的 App.vue具有以下设置:

// App.vue

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

和Home.vue有链接到 Gmap.vue :

// Home.vue

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

和Gmap.vue有<GmapMap>来自 vue2-google-maps 的组件:

// Gmap.vue

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

最后router.js是这样的:

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

在 Safari 中，在路径 / , 当点击 <router-link> , Safari 导航到 /gmap并放入 /gmap Safari 的 window.history 路径.因此，单击 Safari 的后退按钮将使 Safari 导航回到 /。 .

然后点击<router-link>再次将使 Safari 导航到 /gmap .不过，这时候Safari会把/gmap Safari 的 window.history 路径两次(第一次 /gmap 和第二次 /gmap )。因此，单击 Safari 的后退按钮不会使 Safari 导航到 /。 .相反，Safari 将导航到第一个 /gmap。 .

我确认:

• 当 Safari 在第一个 /gmap 之间来回移动时第二个/gmap , popstate事件没有被触发，Vue Router 没有捕捉到变化，所以没有一个 Navigation Guards 被调用。
• 这发生在 Safari(macOS 10.13.6 和 iOS 11.4.1)
• 如果路由到不包含 <GmapMap> 的组件，则不会发生这种情况组件
• 在没有 Vue Router 的情况下进行路由时不会发生这种情况
• Chrome 67(macOS 10.13.6 和 iOS 11.4.1)不会发生这种情况

为什么 Safari 将相同的路径放置两次？

Answer 1

虽然不是一个确切的答案，但要解决问题包装 <keep-alive>周围<router-view>在 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>

来源:GitHub discussion .