使用vue-awesome-swiper的一个坑啊!!！

不能使用切换按钮和分页器

现在swiper已升级到6版本，使用的组件化了，和之前的版本不能通用了，导致按钮和分页器不能使用了！！！也不会报错的

解决方法一

在package.json里退回swiper版本到5.0.0，然后npm update

解决方法二

Swiper.use下Navigation, Pagination, Autoplay等组件

<template>
  <div class="recommend-content">
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"> <i class="el-icon-caret-left"></i> </div>
      <div class="swiper-button-next" slot="button-next"> <i class="el-icon-caret-right"></i></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
import Swiper2, {Navigation, Pagination, Autoplay} from 'swiper';
Swiper2.use([Navigation, Pagination, Autoplay]);

export default {
  name: "Recommend",
  components:{
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 1,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  methods:{
    openButton(open){
      console.info('dsdsds', open);
    },
    onSwiper(swiper) {
      console.log(swiper)
    },
    onSlideChange() {
      console.log('slide change')
    },
  },
  directives: {
    swiper: directive
  }
}
</script>