如何将外部JS脚本添加到VueJS组件

Question

我必须为支付网关使用两个外部脚本。现在，两者都放入index.html文件中。但是，我不想在一开始就加载这些文件。仅在用户打开特定组件（using router-view）时才需要支付网关。

反正有实现这个目标的方法吗？

Answer 1

解决此问题的一种简单有效的方法是将外部脚本添加到mounted()组件的Vue中。我将用GoogleRecaptcha脚本向您说明：

<template>
   .... your HTML
</template>

<script>
  export default {
    data: () => ({
      ......data of your component
    }),
    mounted() {
      let recaptchaScript = document.createElement('script')
      recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
      document.head.appendChild(recaptchaScript)
    },
    methods: {
      ......methods of your component
    }
  }
</script>