После перехода по маршруту vue-router(router-link) пропадает пагинация "vue-awesome-swiper"
Суть в том, что на главной странице расположен swiper с 5 элементами и с пагинацией, которая соответственно имеет 5 элементов. Но, после перехода по какой-либо ссылке router-link и возвращения на главную страницу - отображается только один элемент пагинации "vue-awesome-swiper". В чем может быть причина?
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
name: 'SwiperElement',
title: 'Swiper Element',
components: {
Swiper,
SwiperSlide
},
directives: {
swiper: directive
},
data() {
return {
banners: [
{ src: require('../assets/img/slider-image.png'), number: 1 },
{ src: require('../assets/img/slider-image.png'), number: 2 },
{ src: require('../assets/img/slider-image.png'), number: 3 },
{ src: require('../assets/img/slider-image.png'), number: 4 },
{ src: require('../assets/img/slider-image.png'), number: 5 }
],
swiperOption: {
// Pagination
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: 'true'
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
fadeEffect: {
crossFade: false
}
},
slides: [
{
src: require('../assets/img/slider-image.png'),
alt: 'slider-image'
},
]
}
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
}
},
mounted() {
console.log('Current Swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
}
<template>
<swiper ref="mySwiper" class="swiper" :options="swiperOption">
<div v-swiper:mySwiper="swiperOption">
<div class="swiper-wrapper">
<swiper-slide class="swiper-slide" :key="banner.number" v-for="banner in banners">
<img :src="banner.src" alt="banner-img">
</swiper-slide>
</div>
<!-- pagination -->
<div class="swiper-pagination" slot="pagination"></div>
<!-- navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</swiper>
</template>
Добавлю, что при этом навигация по элементам "swiper" работает и можно просматривать все изображения