javascript - vuejs - 使用谷歌地图的 Safari 浏览器导航

Question

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

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

流程是:

• '事件列表页面'
• 点击一个事件
• 查看“一个事件页面”(上面有 Google map )
• 点击浏览器的“后退”按钮
• 查看“事件列表页面”
• 点击“前进”浏览器按钮
• 查看“一个事件页面”
• 点击“后退”浏览器按钮
• 查看“一个事件页面”(“前进”按钮处于事件状态，如果我点击它，我将看到我当前所在的“一个事件页面”)
• 再次点击“后退”浏览器按钮
• 查看“事件列表页面”

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

Answer 1

解决方案是在您要使用它之前添加一个谷歌地图脚本(例如:在带有 map 的页面上)

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

解决问题