动态脚本加载Nuxt路线更改套管压碎

Question

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

<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>

广告的服务是

​

<template>
  <div>
    ads
    <div :id="id">
      <script-component>
        googletag.cmd.push(
        function() {
        googletag.display('{{ id }}');
        }
        );
      </script-component>
    </div>
  </div>
</template>
<script>
const scriptLoadder = () => import('~/components/script/scriptLoadder')
export default {
  components: {
    'script-component': scriptLoadder
  },
  props: {
    id: { type: String, required: true }
  }
}
</script>

我有另一个类似的组件，用于另一个ads服务，它在服务器负载上工作(当我第一次进入主页时，它工作得很好)。问题是当路线改变时，我又回到原来的路线。这两种广告服务都没有出现。

​

这就是我使用该组件的方式

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div>
    <google-ads id="ATF_LB_1" :key="$route.fullPath + Math.random().toString(16) " />
    or
    <google-ads id="ATF_LB_1" :key="$route.fullPath" />

    <script-component>
      {{ pageScript.HP }}
    </script-component>
    or

    <script-component :key="$route.fullPath">
      {{ pageScript.HP }}
    </script-component>
    or
    <script-component :key="$route.fullPath + Math.random().toString(16) ">
      window.alert('test on page load works when going back not')
    </script-component>
  </div>
</template>

​

Answer 1

所以答案是令人难以置信的恼人。问题不在于我的代码，而在于提供者的代码。他们给我的代码是为了在SSR唯一的网站上运行。注意这段代码来“修复”这个行为的唯一一件事就是卸载组件或key="$router.fullpath“，但这会导致另一个问题，具体取决于您的组件所在的位置。当您在组件内部并更改页面时，Nuxt将运行以下生命周期销毁组件和新页面上的挂载(这是一个问题)，然后再次销毁它。这将导致延迟，除非您添加异步或延迟。所以总而言之，问题出在提供程序代码上；这个组件将在您需要的地方加载模板中的脚本标记。我将打开这个使用Nuxt的组件的npm代码库，并在组件生命周期中创建一个内存泄漏的git问题。