Nuxt中使用swiper和vue-awesome-swiper实现banner轮播及踩坑记录

先说完整的实现过程：

1. vue-awesome-swiper和swiper版本：这里直接安装的最新版本

npm install swiper vue-awesome-swiper -s

"dependencies": {
    "nuxt": "^2.0.0",
    "swiper": "^6.5.0",
    "vue-awesome-swiper": "^4.1.1"
  },

2. Nuxt下配置插件

plugins文件夹下创建nuxt-swiper-plugin.js

import Vue from 'vue'
import VueAwesomeSwiper from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper)

nuxt.config.js中添加如下内容：

plugins: [
    {src: '~/plugins\\nuxt-swiper-plugin.js', ssr:false}
],
css: [
    'swiper/swiper-bundle.css'   // 这里新版本的swiper没有css/swiper.css ，换成这个css
],

3. 实现轮播效果：

<div>
    <swiper :auto-update="true" ref="mySwiper" :options="swiperOption">
        <swiper-slide style="background: #040B1B;">
            <a target="_blank" href="/">
                <img src="~/assets/photo/banner/1525939573202.jpg" alt="首页banner">
            </a>
        </swiper-slide>
        <swiper-slide style="background: #F3260B;">
            <a target="_blank" href="/">
                <img src="~/assets/photo/banner/153525d0ef15459596.jpg" alt="首页banner">
            </a>
        </swiper-slide>
        <div class="swiper-pagination swiper-pagination-white"></div>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev" @click="prev"></div>
        <div class="swiper-button-next swiper-button-white" slot="button-next" @click="next"></div>
    </swiper>
</div>

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
    data() {
        return {
            swiperOption: {
                loop: true,
                //配置分页
                pagination: {
                    el: '.swiper-pagination'//分页的dom节点
                },
                //配置导航
                navigation: {
                    nextEl: '.swiper-button-next',//下一页dom节点
                    prevEl: '.swiper-button-prev'//前一页dom节点
                }
            }
        }
    },
    components: {
        Swiper,
        SwiperSlide
    },
    methods: {
        prev() {
            this.$refs.mySwiper.$swiper.slidePrev()
        },
        next() {
            this.$refs.mySwiper.$swiper.slideNext()
        }
    }
}

踩坑记录

1. 在vue-awesome-swiper 3.1.3版本中使用div+class方式调用swiper左右切换按钮无效

<div v-swiper:mySwiper="swiperOption">
     <div class="swiper-wrapper">
         <div class="swiper-slide" style="background: #040B1B;">
             <a target="_blank" href="/">
                 <img src="~/assets/photo/banner/1525939573202.jpg" alt="首页banner">
             </a>
         </div>
         <div class="swiper-slide" style="background: #F3260B;">
             <a target="_blank" href="/">
                 <img src="~/assets/photo/banner/153525d0ef15459596.jpg" alt="首页banner">
             </a>
         </div>
     </div>
     <div class="swiper-pagination swiper-pagination-white"></div>
     <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
     <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
 </div>

这样写无法实现点击左右按钮进行轮播切换，网上解决方法通过添加@click事件进行控制，但是会报这样的错误

TypeError: Cannot read property 'slidePrev' of undefined
    at VueComponent.prev (index.vue?6ced:392)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLDivElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLDivElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

没有找到slidePrev方法

最后通过组件引用的方法实现，将div+class更换为<swiper>系列标签，这样就可以使用this.$refs.mySwiper.$swiper.slidePrev()方法控制左右按钮进行切换

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
components: {
   	Swiper,
    SwiperSlide
},

2. 老版本中’swiper/dist/css/swiper.css’未找到问题

在新版本的swiper中更换了目录结构，更改为swiper/swiper-bundle.css

3. 一个很奇怪的Bug

之前在尝试网上的解决方案的时候，有一个使用vue-awesome-swiper3.1.3版本偶尔成功的方法，但是在刷新页面之后会报The client-side rendered virtual DOM tree is not matching server-rendered content错误，尝试了很久没有找到原因就放弃了