vuejs - 使用 Google 地图的 Safari 浏览器导航

Question

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

我使用 Safari，Google 地图打破了它的浏览器导航流程。

流程是：

'Events list page'
点击一个事件
参见 'One event page'（上面有 Google 地图）
单击浏览器 'Back' 按钮
查看 'Events list page'
单击 'Forward' 浏览器按钮
见'One event page'
单击 'Back' 浏览器按钮
请参阅 'One event page'（'Forward' 按钮处于活动状态，如果我单击它，我会看到 'One event page'当前）
再次单击 'Back' 浏览器按钮
查看 'Events list page'

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

Answer 1

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

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();
    }
  });
}

解决问题

vuejs - 使用 Google 地图的 Safari 浏览器导航

vuejs - Safari browser navigation with Google map

javascript

safari

google-maps

vue.js

vue-router