1 <template>
 2   <div class="swiper mySwiper">
 3     <div class="swiper-wrapper">
 4       <div data-hash="slide1" class="swiper-slide">Slide 1</div>
 5       <div data-hash="slide2" class="swiper-slide">Slide 2</div>
 6       <div data-hash="slide3" class="swiper-slide">Slide 3</div>
 7       <div data-hash="slide4" class="swiper-slide">Slide 4</div>
 8       <div data-hash="slide5" class="swiper-slide">Slide 5</div>
 9       <div data-hash="slide6" class="swiper-slide">Slide 6</div>
10       <div data-hash="slide7" class="swiper-slide">Slide 7</div>
11       <div data-hash="slide8" class="swiper-slide">Slide 8</div>
12       <div data-hash="slide9" 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     <!-- 切换页面是浏览器的网址会有所变化，就像锚点一样 -->
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: 30,
32         // 设置散列导航选项，或true使用默认值。为每个slide增加散列导航（有点像锚链接）
33         hashNavigation: {
34           watchState: true,
35         },
36         pagination: {
37           el: ".swiper-pagination",
38           clickable: true,
39         },
40         navigation: {
41           nextEl: ".swiper-button-next",
42           prevEl: ".swiper-button-prev",
43         },
44       });
45     });
46   },
47 };
48 </script>
49 
50 <style>
51 html,
52 body {
53   position: relative;
54   height: 100%;
55 }
56 
57 body {
58   background: #eee;
59   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
60   font-size: 14px;
61   color: #000;
62   margin: 0;
63   padding: 0;
64 }
65 .swiper {
66   width: 100%;
67   height: 500px;
68 }
69 
70 .swiper-slide {
71   text-align: center;
72   font-size: 18px;
73   background: #fff;
74 
75   /* Center slide text vertically */
76   display: -webkit-box;
77   display: -ms-flexbox;
78   display: -webkit-flex;
79   display: flex;
80   -webkit-box-pack: center;
81   -ms-flex-pack: center;
82   -webkit-justify-content: center;
83   justify-content: center;
84   -webkit-box-align: center;
85   -ms-flex-align: center;
86   -webkit-align-items: center;
87   align-items: center;
88 }
89 
90 .swiper-slide img {
91   display: block;
92   width: 100%;
93   height: 100%;
94   object-fit: cover;
95 }
96 </style>