七、vue-awesome-swiper頁面跳轉

<template>
    <swiper :options='swiperOption' ref="mySwiper" class='swiper-container swiper-no-swiping'>
        <swiper-slide>
              <div class='res1' @click='changeIndex(1)'></div>
                
        </swiper-slide>
        <swiper-slide>
            <one></one>    
        </swiper-slide>
        <swiper-slide>
            <two></two>
        </swiper-slide>
        <swiper-slide><three></three></swiper-slide>
        <!-- <swiper-slide><four></four></swiper-slide> -->
        <div class='swiper-pagination' slot='pagination'></div>
    </swiper>
</template>

export default {
  name: '',
  data () {
    return {
      swiperOption: {
        direction: 'vertical',
        slidesPerView: 1,
        spaceBetween: 30,
        mousewheel: true,
        lazyLoading : true,
        onSlideChangeEnd: swiper => {
          this.page = swiper.realIndex + 1
          this.index = swiper.realIndex
          alert(123)
        },
        fade:{crossFade:true},
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      },
      pathName:this.$route.name
    }
  },
    components: { 
    swiper,
    swiperSlide,
    one,
    two,
    three

    
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    },
    change (swiper){
        console.log(swiper)
    }
  },
  // 測試

  methods:{
    //點擊跳到對應的index頁面
    changeIndex(index){
      console.log(this.$refs.mySwiper.swiper)
      this.$refs.mySwiper.swiper.slideTo(index, 1000, true);//切換到第一個slide，速度爲1秒
      
    }
  }
}