vuejs - 带有谷歌地图的 Safari 浏览器导航答案

【问题标题】：vuejs - Safari browser navigation with Google mapvuejs - 带有谷歌地图的 Safari 浏览器导航
【发布时间】：2018-06-18 12:30:02
【问题描述】：

我有一个带有 vue-router 的 VueJS 应用程序，但我遇到了包含 Google 地图的页面问题（没有 vue 插件的标准实现）

我使用 Safari，谷歌地图破坏了它的浏览器导航流程。

流程是：

'事件列表页面'
点击一个事件
参见“一个活动页面”（上面有 Google 地图）
点击浏览器的“返回”按钮
查看“活动列表页面”
点击“转发”浏览器按钮
参见“一个活动页面”
点击“返回”浏览器按钮
查看“一个活动页面”（“转发”按钮处于活动状态，如果我点击它，我将看到我当前所在的“一个活动页面”）
再次点击“返回”浏览器按钮
查看“活动列表页面”

我有最后一个 vue-router 版本（3.0.1），我不明白发生了什么。此错误仅出现在移动版和桌面版 Safari 中（所有版本）请帮助 =)

【问题讨论】：

我也有同样的问题。 history.back() 会在加载谷歌地图时中断。你找到解决办法了吗？

标签： javascript google-maps vue.js safari vue-router

【解决方案1】：

解决方案是在您将要使用它之前添加一个谷歌地图脚本（例如：在带有地图的页面上）

function createPreconnectElement(src) {
  const preconnectElement = document.createElement('link');
  const headElement = document.querySelector('head');
  preconnectElement.rel = 'preconnect';
  preconnectElement.href = src;
  preconnectElement.crossOrigin = '';
  headElement.prepend(preconnectElement);
}

function init(elem) {
  return new Promise((resolve, reject) => {
    if (!(window && window.google && window.google.maps)) {
      const scriptElement = document.createElement('script');
      const appendToElement = elem || document.querySelector('head');
      const src = `https://maps.googleapis.com/maps/api/js?v=beta&key=${API_KEY}`;
      scriptElement.src = src;
      scriptElement.type = 'text/javascript';
      createPreconnectElement(src);
      appendToElement.appendChild(scriptElement);
      scriptElement.onload = () => {
        resolve();
      }
    } else {
      reject();
    }
  });
}

解决问题

【讨论】：