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

Question

我已经设计了一个静态网站，我正在转换为 Nuxt js，因为该网站需要交互。在我运行我的 Nuxt 服务器 "npm run build...npm run start" 加载脚本后，我的 carousel/slides 工作正常。当我使用 nuxt-link 导航到下一页时，slides/carousel 不再起作用。我认为问题在于我的脚本最初仅在从服务器加载时加载。

在我的 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>

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

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

Nuxt Js - Script loaded just once during initial page load

javascript

vue.js

nuxtjs