Vue.js中延迟执行至外部脚本加载：返回按钮触发reCAPTCHA渲染错误

我之前在Vue项目中集成reCAPTCHA时也碰到过一模一样的问题——正常加载和刷新没问题，但路由跳转后返回就报错。本质是单页应用的路由切换特性和reCAPTCHA的全局API生命周期不兼容导致的，下面给你几个经过验证的解决方案：

问题的核心是：当你导航离开页面时，Vue组件会被销毁，但reCAPTCHA的实例和全局绑定关系不会自动清除，返回时重新挂载组件就会出现冲突。所以必须在组件销毁时主动销毁reCAPTCHA实例：

<template>
  <div ref="recaptchaContainer"></div>
</template>

<script>
export default {
  data() {
    return {
      recaptchaWidgetId: null // 存储实例ID，用于后续销毁
    }
  },
  mounted() {
    // 确保grecaptcha全局对象存在后再初始化
    if (window.grecaptcha) {
      this.initRecaptcha()
    } else {
      // 极端情况：返回时脚本还没加载完成，监听全局load事件
      window.addEventListener('load', this.initRecaptcha)
    }
  },
  beforeUnmount() {
    // 销毁reCAPTCHA实例并清理状态
    if (this.recaptchaWidgetId && window.grecaptcha) {
      window.grecaptcha.reset(this.recaptchaWidgetId)
      window.grecaptcha.destroy(this.recaptchaWidgetId)
      this.recaptchaWidgetId = null
    }
    // 移除监听事件，避免内存泄漏
    window.removeEventListener('load', this.initRecaptcha)
  },
  methods: {
    initRecaptcha() {
      this.recaptchaWidgetId = window.grecaptcha.render(this.$refs.recaptchaContainer, {
        sitekey: '你的sitekey',
        callback: (response) => {
          this.$emit('recaptchaResponse', response)
        }
        // 其他配置项按需添加
      })
    }
  }
}
</script>

不要在页面底部全局固定加载reCAPTCHA脚本，而是把脚本加载逻辑和组件生命周期绑定，确保每次组件挂载时脚本状态可控：

<template>
  <div ref="recaptchaContainer"></div>
</template>

<script>
export default {
  data() {
    return {
      recaptchaWidgetId: null,
      isScriptLoaded: false
    }
  },
  mounted() {
    this.loadRecaptchaScript()
      .then(() => this.initRecaptcha())
      .catch(err => console.error('reCAPTCHA加载失败:', err))
  },
  beforeUnmount() {
    // 同样销毁实例
    if (this.recaptchaWidgetId && window.grecaptcha) {
      window.grecaptcha.destroy(this.recaptchaWidgetId)
      this.recaptchaWidgetId = null
    }
  },
  methods: {
    loadRecaptchaScript() {
      return new Promise((resolve, reject) => {
        // 如果脚本已经加载过，直接跳过
        if (this.isScriptLoaded || window.grecaptcha) {
          this.isScriptLoaded = true
          resolve()
          return
        }
        // 动态创建脚本标签
        const script = document.createElement('script')
        script.src = 'https://www.google.com/recaptcha/api.js'
        script.async = true
        script.onload = () => {
          this.isScriptLoaded = true
          resolve()
        }
        script.onerror = reject
        document.body.appendChild(script)
      })
    },
    initRecaptcha() {
      this.recaptchaWidgetId = window.grecaptcha.render(this.$refs.recaptchaContainer, {
        sitekey: '你的sitekey',
        callback: (response) => {
          this.$emit('recaptchaResponse', response)
        }
      })
    }
  }
}
</script>

如果你的路由使用了keep-alive缓存组件，还需要在组件激活/失活时处理reCAPTCHA实例：

<script>
export default {
  // ...其他代码
  activated() {
    // 激活组件时重新初始化实例
    if (!this.recaptchaWidgetId) {
      this.initRecaptcha()
    }
  },
  deactivated() {
    // 失活组件时销毁实例
    if (this.recaptchaWidgetId && window.grecaptcha) {
      window.grecaptcha.destroy(this.recaptchaWidgetId)
      this.recaptchaWidgetId = null
    }
  }
}
</script>

额外提醒：一定要用$refs确保容器元素确实挂载到DOM后再调用grecaptcha.render，避免Vue异步DOM更新导致的元素不存在错误。

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