1 <template>
 2   <div class="swiper mySwiper">
 3     <div class="swiper-wrapper">
 4       <div data-history="1" class="swiper-slide">Slide 1</div>
 5       <div data-history="Slide 2" class="swiper-slide">Slide 2</div>
 6       <div data-history="3" class="swiper-slide">Slide 3</div>
 7       <div data-history="Slide 4" class="swiper-slide">Slide 4</div>
 8       <div data-history="5" class="swiper-slide">Slide 5</div>
 9       <div data-history="Slide 6" class="swiper-slide">Slide 6</div>
10       <div data-history="7" class="swiper-slide">Slide 7</div>
11       <div data-history="Slide 8" class="swiper-slide">Slide 8</div>
12       <div data-history="9" class="swiper-slide">Slide 9</div>
13     </div>
14     <div class="swiper-button-next"></div>
15     <div class="swiper-button-prev"></div>
16     <div class="swiper-pagination"></div>
17     <!-- history 历史记录导航，即每张轮播图都有url，可以返回，但是在vue中不行 -->
18   </div>
19 </template>
20 <script>
21 import Swiper from "swiper/swiper-bundle.min.js";
22 import "swiper/swiper-bundle.min.css";
23 
24 export default {
25   components: {},
26   methods: {},
27   mounted() {
28     this.$nextTick(() => {
29       // 创建swiper对象
30       var swiper = new Swiper(".mySwiper", {
31         spaceBetween: 50,
32         slidesPerView: 1,
33         navigation: {
34           nextEl: ".swiper-button-next",
35           prevEl: ".swiper-button-prev",
36         },
37         pagination: {
38           el: ".swiper-pagination",
39         },
40         // 设置为true开启history导航，或者自定义history导航选项。
41         // 在slide切换时可无刷新更换URL和浏览器的history.state(pushState)。这样每个slide都会拥有一个自己的URL。
42         // 可惜，无法在vue的spa中使用，因为vue是单页面复用
43         history: {
44           key: "slide",
45         },
46       });
47     });
48   },
49 };
50 </script>
51 
52 <style>
53 html,
54 body {
55   position: relative;
56   height: 100%;
57 }
58 
59 body {
60   background: #eee;
61   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
62   font-size: 14px;
63   color: #000;
64   margin: 0;
65   padding: 0;
66 }
67 .swiper {
68   width: 100%;
69   height: 500px;
70 }
71 
72 .swiper-slide {
73   text-align: center;
74   font-size: 18px;
75   background: #fff;
76 
77   /* Center slide text vertically */
78   display: -webkit-box;
79   display: -ms-flexbox;
80   display: -webkit-flex;
81   display: flex;
82   -webkit-box-pack: center;
83   -ms-flex-pack: center;
84   -webkit-justify-content: center;
85   justify-content: center;
86   -webkit-box-align: center;
87   -ms-flex-align: center;
88   -webkit-align-items: center;
89   align-items: center;
90 }
91 
92 .swiper-slide img {
93   display: block;
94   width: 100%;
95   height: 100%;
96   object-fit: cover;
97 }
98 </style>