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

【问题标题】：Nuxt Js - Script loaded just once during initial page loadNuxt Js - 在初始页面加载期间仅加载一次脚本
【发布时间】：2020-09-14 01:39:04
【问题描述】：

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

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

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：当我通过重新加载选项卡完全重新加载页面时，幻灯片可以完美运行。

【问题讨论】：

标签： javascript vue.js nuxtjs

【解决方案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>

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

【讨论】：