swiper在vue的不使用router的使用方法

vue代码使用swiper.js时，不使用router！
下载 swiper.js文件
下载完成，引入到HTML
方法一:在vue data 里面定义一个对象用来初始化swiper，
在method里面定义一个函数
在mounted里面调用它；

 data：{
swiper：{}
},
mounted:function(){
this.swiperTo();
},
methods:{
              swiperTo:function(){
                this.swiper = new Swiper('.swiper-container1', {
								slidesPerView: 'auto', //重要 可以去swiper搜索
								centeredSlides: true,   //重要
								paginationClickable: true,
								effect: 'left',
								spaceBetween: 30,
								direction: 'vertical', // 垂直切换选项
                                loop: true, // 循环模式选项
								observer: true,//修改swiper自己或子元素时，自动初始化swiper
								observeParents: true,//修改swiper的父元素时，自动初始化swiper
								initialSlide: photoIndex,//默认显示在中心位置
								on: {
									slideChangeTransitionEnd: function(){
										//alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
										}
								}
           });
              },
            },

方法二：
直接在mounted里面定义使用swiper；

//使用
 mounted(){
        var swiper = new Swiper('.swiper-container1', {
								slidesPerView: 'auto', //重要 可以去swiper搜索
								centeredSlides: true,   //重要
								paginationClickable: true,
								effect: 'left',
								spaceBetween: 30,
								direction: 'vertical', // 垂直切换选项
                                loop: true, // 循环模式选项
								observer: true,//修改swiper自己或子元素时，自动初始化swiper
								observeParents: true,//修改swiper的父元素时，自动初始化swiper
								initialSlide: photoIndex,//默认显示在中心位置
								on: {
									slideChangeTransitionEnd: function(){
										//alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
										}
								}
           });
    },

HTML：

<div class="swiper-container1">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

通过文档查看swiper对应属性方法：swiper官方文档https://www.swiper.com.cn/usage/index.html#