javascript - Nuxt Js - 在初始页面加载期间仅加载一次脚本

Question

我已经设计了一个静态网站，并且我正在转换为 Nuxt js，因为该网站需要具有交互性。在我运行我的 Nuxt 服务器“npm run build...npm run start”之后，脚本被加载并且我的轮播/幻灯片工作正常。当我使用 nuxt-link 导航到下一页时，幻灯片/轮播不再起作用。我认为问题在于我的脚本仅在从服务器加载时才最初加载。

在我的 nuxt.config.js 文件中，我已经在全局和我的组件中的 api 文档之后的 head 标记中包含了 js，但它是相同的

head: {
    script: [
        /* external javascripts */
        { src: 'js/jquery.min.js', body: true, async: true, defer: true },
        { src: 'js/bootstrap.min.js', body: true, async: true, defer: true },
        { src: 'js/wow.min.js', body: true, async: true, defer: true },
        { src: 'js/jquery.backTop.min.js', body: true, defer: true },
        { src: 'js/waypoints.min.js', body: true, async: true, defer: true },
        { src: 'js/waypoints-sticky.min.js', body: true, async: true, defer: true },
        { src: 'js/owl.carousel.min.js', body: true, async: true, defer: true },
        { src: 'js/jquery.stellar.min.js', body: true, async: true, defer: true },
        { src: 'js/jquery.counterup.min.js', body: true, async: true, defer: true },
        { src: 'js/venobox.min.js', body: true, async: true, defer: true },
        { src: 'js/custom-scripts.js', body: true, async: true, defer: true }
      ],
}

通过一些在线资源，我添加了async: true 和 defer: true，但这似乎都是一样的

下面的图片是推荐轮播如何查看页面加载和 nuxt-link 导航后的屏幕截图

请有关如何解决此问题的任何建议？非常感谢

PS：当我通过重新加载选项卡完全重新加载页面时，幻灯片可以完美运行。

Answer 1

我最终使用 vue carousel 来修复幻灯片。 npm install vue-carousel
然后我在我的插件文件夹中创建了一个 vue-carousel.js 文件

import Vue from 'vue';
import VueCarousel from 'vue-carousel';

Vue.use(VueCarousel);

在我的 nuxt.config.js 文件中，我导入了我的插件

plugins: [
    { src: '~/plugins/vue-carousel.js', ssr: false },
  ]

最后在我的 .vue 文件中

<carousel :per-page-custom="[[200, 1], [768, 2]]">
    <slide>
      Slide 1 Content
    </slide>
    <slide>
      Slide 2 Content
    </slide>
  </carousel>

替换幻灯片的内容，我的最终输出