Nuxt2嵌套组件内监听路由变化解决reCaptcha跳转问题

数据老陈

2026-6-24

解决Nuxt项目中路由过渡时VueRecaptcha位置跳转问题

问题原因

VueRecaptcha v1.3.0依赖Google reCAPTCHA脚本动态插入DOM元素，这些元素脱离Vue虚拟DOM管控，无法自动继承Vuetify路由过渡的动画样式；
使用scroll-x-reverse-transition时，页面容器执行transform: translateX过渡动画，但动态生成的reCAPTCHA元素未同步应用该动画，导致过渡过程中视觉上出现位置跳转；
之前三种方案无效的核心原因：
- 全局beforeEach钩子触发时机过早，过渡动画尚未启动，无法精准控制reCAPTCHA显隐时机；
- transition组件的@leave事件触发时，嵌套层级内的reCAPTCHA组件DOM尚未进入卸载流程，状态控制不及时；
- 组件内监听$route的时机晚于过渡动画启动时间，此时reCAPTCHA位置已开始偏移。

可靠解决方案

方案1：利用Vue过渡钩子+Provide/Inject精准控制显隐

通过路由过渡的关键生命周期钩子标记过渡状态，再通过Provide/Inject传递给嵌套组件，精准控制reCAPTCHA的显隐时机：

在management.vue的路由过渡组件中绑定钩子并提供状态：

<template>
  <transition 
    name="scroll-x-reverse-transition"
    @before-leave="setTransitionStatus(true)"
    @after-enter="setTransitionStatus(false)"
  >
    <router-view />
  </transition>
</template>

<script>
export default {
  provide() {
    return {
      isRouteTransitioning: this.isRouteTransitioning
    }
  },
  data() {
    return {
      isRouteTransitioning: false
    }
  },
  methods: {
    setTransitionStatus(status) {
      this.isRouteTransitioning = status
    }
  }
}
</script>

在嵌套的InnerPartialComponent中注入状态并控制reCAPTCHA显隐：

<template>
  <div v-show="!isRouteTransitioning">
    <vue-recaptcha sitekey="YOUR_SITE_KEY"></vue-recaptcha>
  </div>
</template>

<script>
export default {
  inject: ['isRouteTransitioning']
}
</script>