Nuxt Js - скрипт загружается только один раз при начальной загрузке страницы - PullRequest
Новая
       81

Nuxt Js - скрипт загружается только один раз при начальной загрузке страницы

0 голосов
/ 27 мая 2020

У меня уже разработан веб-сайт stati c, и я конвертирую его в Nuxt js, так как веб-сайт должен быть интерактивным. После того, как я запустил свой сервер Nuxt "npm run build ... npm run start", скрипты загружаются, и моя карусель / слайды работают нормально. Когда я перехожу с помощью nuxt-ссылки на следующую страницу, слайды / карусель снова не работают. Я думаю, проблема в том, что мои сценарии загружаются только при загрузке с сервера.

в моем файле nuxt.config. js, я включил js в тег заголовка, следуя за документами api как глобально и в моем компоненте, но это тот же 

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 }
      ],
}

, проходящий через какой-то ресурс в Интернете, я добавил asyn c: true и defer: true , но все это кажется тот же

изображения ниже - это скриншоты того, как карусель отзывов выглядит при загрузке страницы и после навигации по Nuxt-ссылке Image at Initial page load

Image after nuxt-link navigation

Пожалуйста, какие-нибудь предложения о том, как это исправить? Большое спасибо

PS: Когда я полностью перезагружаю страницу, перезагружая вкладку, слайды работают отлично.

1 Ответ

0 голосов
/ 03 июня 2020

В итоге я использовал vue карусель для фиксации слайдов. 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>

замена содержимого слайдов, мой окончательный результат

Fina Output

...