vue3单页面添加live2d

<template>
  <router-link tag="button" to="/goToPage" class="router-link">to other page</router-link>
</template>

<script>
import { onMounted, onBeforeUnmount } from 'vue';

export default {

  setup() {
    const scriptRefs = [];

    const loadScript = (src) => {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.onload = () => resolve(script);
        script.onerror = () => reject(new Error(`Script load error for ${src}`));
        document.body.appendChild(script);
        scriptRefs.push(script);
      });
    };

    const loadStyle = (href) => {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = href;
      document.head.appendChild(link);
      scriptRefs.push(link);
    };

    onMounted(async () => {
      const isScriptLoaded = (src) => {
        return Array.from(document.scripts).some(script => script.src === src);
      };

      const isStyleLoaded = (href) => {
        return Array.from(document.styleSheets).some(sheet => sheet.href === href);
      };

      // 动态加载CSS
      if (!isStyleLoaded('https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css')) {
        loadStyle('https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css');
      }
      if (!isStyleLoaded('https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css')) {
        loadStyle('https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css');
      }

      // 动态引入JavaScript的示例。动态引入脚本时，需要考虑到脚本的加载顺序和依赖关系。例如，Semantic UI 脚本依赖于 jQuery，因此你需要先加载 jQuery。
      // 在动态引入脚本之前，检查该脚本是否已经存在于document.head或document.body中。如果已经存在，则不需要再次加载。
      // 如果需要在组件销毁时清理动态加载的脚本，可以存储脚本元素的引用，并在组件的beforeDestroy或destroyed生命周期钩子中移除它们。
      // 不过，通常来说，移除全局脚本并不是一个好主意，因为它们可能会影响其他页面的功能。
      // 动态加载JS
      if (!isScriptLoaded('https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js')) {
        await loadScript('https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js');
      }
      if (!isScriptLoaded('https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js')) {
        await loadScript('https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js');
      }
      if (!isScriptLoaded('https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js')) {
        await loadScript('https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js');
      }
      if (typeof live2d_path === 'undefined' && !isScriptLoaded('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js')) {
        await loadScript('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js');
      }
    });

    onBeforeUnmount(() => {
      // 仅移除在组件中加载的脚本和样式
      scriptRefs.forEach(ref => {
        if (ref.parentNode) {
          ref.parentNode.removeChild(ref);
        }
      });

      // 移除 live2d-widget 相关元素
      const live2dElements = document.querySelectorAll('.live2d-widget');
      live2dElements.forEach(el => el.parentNode.removeChild(el));

      // 这里可以添加任何其他需要的销毁操作，例如销毁全局变量或实例
      if (typeof window.live2d_path !== 'undefined') {
        delete window.live2d_path;
      }
    });
  }
}
</script>


<style scoped>

</style>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>