Vue组件切换后Google Translation Plugin无法重新加载的问题求助

1. 修复全局回调冲突问题 #

引入脚本时指定的cb=googleTranslateElementInit回调默认只执行一次，二次初始化时无法触发完整的插件初始化流程。可以自定义全局回调函数，确保每次初始化前清理旧实例：

// 在全局作用域（如index.html或全局脚本文件）定义
window.googleTranslateElementInit = function() {
  // 清空目标容器
  const container = document.getElementById('google_translate_element');
  if (container) container.innerHTML = '';
  // 重新初始化翻译组件
  new google.translate.TranslateElement({}, 'google_translate_element');
};

然后在预览组件的onMounted中调用该函数：

onMounted(() => {
  window.googleTranslateElementInit?.();
});

2. 组件卸载时彻底清理残留 #

Google翻译插件会自动插入额外DOM元素（如顶部翻译栏），这些残留会干扰二次初始化。在onUnmounted中进行彻底清理：

onUnmounted(() => {
  // 清空目标容器
  const container = document.getElementById('google_translate_element');
  if (container) container.innerHTML = '';
  
  // 移除Google自动添加的翻译栏
  const translateBar = document.querySelector('.skiptranslate');
  if (translateBar) translateBar.remove();
  
  // 重置全局翻译对象缓存
  if (window.google?.translate) {
    delete window.google.translate.TranslateElement.prototype.instance;
  }
});

3. 动态控制脚本加载与销毁 #

放弃一次性引入脚本，改为在预览组件挂载时动态加载，卸载时移除脚本并清除全局状态，确保每次进入预览都是全新的初始化流程：

onMounted(() => {
  let script = document.querySelector('script[src*="translate.google.com/translate_a/element.js"]');
  if (!script) {
    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
    document.head.appendChild(script);
  } else {
    // 脚本已存在，直接触发初始化
    window.googleTranslateElementInit();
  }
});

onUnmounted(() => {
  // 移除脚本
  const script = document.querySelector('script[src*="translate.google.com/translate_a/element.js"]');
  if (script) script.remove();
  
  // 清理DOM与全局状态
  const container = document.getElementById('google_translate_element');
  if (container) container.innerHTML = '';
  const translateBar = document.querySelector('.skiptranslate');
  if (translateBar) translateBar.remove();
  
  delete window.googleTranslateElementInit;
  if (window.google) delete window.google.translate;
});

4. 用MutationObserver确保DOM就绪 #

插件渲染是异步的，二次初始化时可能容器DOM未完全准备好，用MutationObserver监控容器状态后再初始化：

onMounted(() => {
  const container = document.getElementById('google_translate_element');
  if (!container) return;

  const observer = new MutationObserver(() => {
    if (container.innerHTML === '') {
      window.googleTranslateElementInit();
      observer.disconnect();
    }
  });

  observer.observe(container, { childList: true, subtree: true });
  window.googleTranslateElementInit();
});

内容的提问来源于stack exchange，提问作者NicolasSC