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具有vue2-google-maps中的<GmapMap>分量：

// 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没有捕获到更改，因此没有任何导航卫士调用。
这是在Safari（macOS 10.13.6和iOS 11.4.1）中发生的
如果路由到不包含<GmapMap>组件的组件，则不会发生这种情况
当没有Vue路由器进行路由时，这不会发生
在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。

Vue Router正在Safari的window.history中复制条目

1 个答案: