动态脚本加载 Nuxt 路由改变套管破碎答案

【问题标题】：dynamic script loading Nuxt route change casing crushing动态脚本加载 Nuxt 路由改变套管破碎
【发布时间】：2021-08-19 00:04:28
【问题描述】：

我创建了一个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>

我有另一个类似的组件用于另一个在服务器负载上工作的广告服务（当我第一次进入主页时，这工作正常）。问题是当路线改变时，我又回到同一条路线。两种广告服务都没有出现。

这就是我使用组件的方式

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

【问题讨论】：

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

标签： javascript html vue.js vue-component nuxt.js

【解决方案1】：

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

【讨论】：