Javascript 动态脚本加载Nuxt路由更改套管破碎

我创建了一个vue组件来动态加载ads脚本，当路由发生变化时，该组件应该销毁自己，并在路由进入时重新更改。 因此，当路线离开时，没有问题，但当我转到一个页面，然后返回到同一页面时，广告不再出现

<template>
      <div style="display: none;">
        <slot />
      </div>
    </template>
    <script>
    export default {
      props: {
        async: { type: Boolean, default: true },
        location: { type: String, default: '' }, // or elemnt id which will select the sapce
        src: { type: String, required: false, default: '' }
      },
      data () {
        return {
          script: null
        }
      },
      beforeDestroy () {
        console.log('remove')
        if (this.script) {
          if (!this.location) {
            this?.$el?.removeChild(this?.script)
          }/** else {
            const tag = document.querySelector(this.location)
            tag?.parentNode?.removeChild(this.script)
          } */
        }
      },
      mounted () {
        console.log('add loadjs')
        this.loadJs()
      },
      methods: {
        loadJs () {
          const scriptTag = document.createElement('script')
          console.log(this.$el)
          scriptTag.async = this.async || true
          // console.log(Object.keys(this.$slots.default[0]))
          if (!this.src && this?.$slots?.default) { // when script is empty
            scriptTag.text = this?.$slots?.default[0]?.text
          } else { scriptTag.src = this.src }
          if (!this.location) { // when location is not set load after element
            this.$el.appendChild(scriptTag)
          } else {
            const location = document.querySelector(this.location)
            location.appendChild(scriptTag)
          }
          this.script = scriptTag
        }
      }
    }
    </script>

导出默认值{
道具：{
异步：{type:Boolean，默认值：true}，
位置：{type:String，默认值：'}，//或将选择sapce的元素id
src:{type:String，必需：false，默认值：“”
},
数据（）{
返回{
脚本：null
}
},
在销毁之前（）{
console.log（'remove'）
if（this.script）{
如果（！this.location）{
此？$el？.removeChild（此？.script）
}/**否则{
const tag=document.querySelector（this.location）
标记？.parentNode？.removeChild（此.script）
} */
}
},
挂载（）{
log（'addloadjs'）
this.loadJs（）
},
方法：{
loadJs（）{
const scriptTag=document.createElement（'script'）
console.log（这个$el）
scriptTag.async=this.async | | true
//console.log（Object.keys（this.$slots.default[0]））
如果（！this.src&&this？$slots？.default）{//脚本为空时
scriptTag.text=此？$slots？.default[0]？.text
}else{scriptTag.src=this.src}
如果（！this.location）{//当未设置位置时加载元素后
此.$el.appendChild（脚本标记）
}否则{
const location=document.querySelector（this.location）
location.appendChild（scriptTag）
}
this.script=scriptTag
}
}
}

广告的服务是

广告
googletag.cmd.push(
函数（）{
display（{{id}}'）；
}
);
常量ScriptLoader=（）=>导入（“~/components/script/ScriptLoader”）
导出默认值{
组成部分：{
“脚本组件”：ScriptLoader
},
道具：{
id:{type:String，必需：true}
}
}

所以答案令人难以置信地恼火。问题不在于我的代码，而在于提供者的代码。他们给我的代码是打算在SSR专用站点上运行的。要“修复”此行为，只需注意此代码，即卸载组件或密钥=“$router.fullpath”，但这将导致另一个问题，具体取决于组件的位置。当您在组件内部并更改页面时，Nuxt将运行以下生命周期销毁组件和新页面上的装载（这是一个问题），然后再次销毁它。除非添加异步或延迟，否则这将导致延迟。

---

总之，问题在于提供者代码；此组件将在模板中您需要的地方加载脚本标记。我将打开此使用Nuxt的组件的npm repo，并在组件生命周期中创建一个git问题的内存泄漏。

您是否检查了DOM，以查看脚本是否在您预期的情况下存在？是的，看起来元素仍然存在。当我更改页面时，元素被删除，当我返回时，元素被重新读取。页面加载-脚本工作移动页面-按预期删除脚本返回页面-脚本已读取但未运行