完整代码详见底部

1.step1:data中定义窗口值参数以及默认slide数量

data(){
    return{
        screenWidth: document.body.clientWidth,
        swiperSlider:6,
    }
},

2.step2:页面一加载的时候初始化窗口高度并初始化应该显示的slide数量

mounted(){
  this.reSetWindow()
  this.changeSlider()
},

reSetWindow(){
    window.onresize = () => {
        return (() => {
            window.screenWidth = document.body.clientWidth
            this.screenWidth = window.screenWidth
        })()
    }
}
changeSlider(){
    // console.log(this.screenWidth,"333333333333333333333333")
    if(this.screenWidth>1500){
        this.swiperSlider = 6
    }else if(this.screenWidth<1500 && this.screenWidth>1200){
        this.swiperSlider = 5
    }else if(this.screenWidth<1200 && this.screenWidth>900){
        this.swiperSlider = 4
    }else if(this.screenWidth<900 && this.screenWidth>600){
        this.swiperSlider = 3
    }else{
        this.swiperSlider = 2
    }
    // console.log(this.swiperSlider,"llllllllllllllll")
    this.$nextTick(()=>{
        this.initSwiperGroup()
    })
},

3.step3:改变窗口大小并监听获取窗口大小的值 操作显示的slide数量

watch:{
    screenWidth(val){
    // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if(!this.timer){
            // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
            this.screenWidth = val
            this.timer = true
            let that = this
            setTimeout(function(){
                // 打印screenWidth变化的值
                that.changeSlider()
                that.timer = false
            },1000)
        }
    },
},

4.step4:重新加载轮播

initSwiperGroup(){
    new Swiper('.swiper-container.swiper-container2', {
        slidesPerView: this.swiperSlider,
        spaceBetween: 35,
        slidesPerGroup: this.swiperSlider,
        // autoplay:false,
        // loop: true,
        loopFillGroupWithBlank: true,
        // pagination: {
        //     el: '.swiper-pagination.swiper-pagination2',
        //     clickable: true,
        // },
        navigation: {
            nextEl: '.swiper-button-next.swiper-button-next2',
            prevEl: '.swiper-button-prev.swiper-button-prev2',
        },
    });   
}

完整代码如下

export default{
    data(){
        return{
            screenWidth: document.body.clientWidth,
            swiperSlider:6,
        }
    },
    watch:{
        screenWidth(val){
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
            if(!this.timer){
                // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
                this.screenWidth = val
                this.timer = true
                let that = this
                setTimeout(function(){
                    // 打印screenWidth变化的值
                    that.changeSlider()
                    that.timer = false
                },1000)
            }
        },
    },
    mounted(){
      this.reSetWindow()
      this.changeSlider()
    },
    methods:{
        changeSlider(){
            // console.log(this.screenWidth,"333333333333333333333333")
            if(this.screenWidth>1500){
                this.swiperSlider = 6
            }else if(this.screenWidth<1500 && this.screenWidth>1200){
                this.swiperSlider = 5
            }else if(this.screenWidth<1200 && this.screenWidth>900){
                this.swiperSlider = 4
            }else if(this.screenWidth<900 && this.screenWidth>600){
                this.swiperSlider = 3
            }else{
                this.swiperSlider = 2
            }
            // console.log(this.swiperSlider,"llllllllllllllll")
            this.$nextTick(()=>{
                this.initSwiperGroup()
            })
        },
        reSetWindow(){
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth
                    this.screenWidth = window.screenWidth
                })()
            }
        },
        initSwiperGroup(){
            new Swiper('.swiper-container.swiper-container2', {
                slidesPerView: this.swiperSlider,
                spaceBetween: 35,
                slidesPerGroup: this.swiperSlider,
                // autoplay:false,
                // loop: true,
                loopFillGroupWithBlank: true,
                // pagination: {
                //     el: '.swiper-pagination.swiper-pagination2',
                //     clickable: true,
                // },
                navigation: {
                    nextEl: '.swiper-button-next.swiper-button-next2',
                    prevEl: '.swiper-button-prev.swiper-button-prev2',
                },
            });   
        }
    }

}