Nuxt动态路由同类页面跳转时head插入的script不重复执行如何解决

Vue/Nuxt 框架内置的头部标签管理模块（vue-meta / @unhead/vue）默认会通过唯一标识比对头部标签，相同标识的标签会直接复用，不会重新插入DOM。而脚本只有在首次被插入DOM时才会执行，因此同动态路由页面跳转时，复用的旧脚本标签不会触发二次执行。

• 方案1：给头部脚本添加唯一标识（改造成本最低）
  给head配置中的脚本添加唯一的hid（Vue2/Nuxt2）或key（Vue3/Nuxt3）属性，属性值关联动态路由参数（比如商品ID），每次路由参数变化时标识同步更新，框架就会删除旧脚本插入新脚本，自动触发执行。
  示例代码（Nuxt2/Vue2）：

  private head() {
    return {
      script: [
        {
          innerHTML: "alert(1)",
          // 替换为你的动态路由参数，比如商品ID
          hid: `product-detail-script-${this.$route.params.productId}`
        }
      ]
    }
  }
  

  示例代码（Nuxt3/Vue3）：

  const route = useRoute()
  useHead({
    script: [
      {
        innerHTML: "alert(1)",
        key: `product-detail-script-${route.params.productId}`
      }
    ]
  })
  

• 方案2：生命周期钩子手动插入脚本
  不通过框架头部管理方法注入脚本，直接在页面生命周期中手动创建脚本元素插入DOM，适配所有场景，包括开启了页面缓存（keep-alive）的情况。
  常规页面示例代码：

  // Vue2 写法
  mounted() {
    const customScript = document.createElement('script')
    // 替换为asyncData返回的脚本内容
    customScript.innerHTML = 'alert(1)'
    document.head.appendChild(customScript)
  }
  
  // Vue3 写法
  onMounted(() => {
    const customScript = document.createElement('script')
    customScript.innerHTML = 'alert(1)'
    document.head.appendChild(customScript)
  })
  

  如果页面开启了keep-alive缓存，将逻辑写在activated钩子中，同时可以在页面离开时清理脚本避免冗余：

  // Vue2 缓存页示例
  activated() {
    this.customScript = document.createElement('script')
    this.customScript.innerHTML = 'alert(1)'
    document.head.appendChild(this.customScript)
  },
  beforeRouteLeave() {
    this.customScript && document.head.removeChild(this.customScript)
  }
  

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