首先轮播图是这样的：

 很美好，都显示出来了，但是当我缩小浏览器窗口时：

 图片显示不全，即使我外面设置了等比例缩小，它里面的图片尺寸还是根据原来的尺寸不变化。

下面解决方法1：

HTML部分：

js部分，图片以数组方式传入

css部分：

此时看一下结果：

 你以为没变化吗，其实已经改变了，只是因为没刷新，所以我自己上网找了别人说的什么几把玩意，说调一下update，resize一下，可是这些几把方法不适合我，没有用，swiper不会自动刷新，看了官方文档，用了它推荐的几把方法也不起效果。

最后一气之下，自己按了F5，

 达到了我想要的结果，那就自己实现刷新了，vue有个provide方法，可以实现reload注入，实现局部刷新。

在app.vue下

 实现该方法注册，那么在其他组件都可以用这个方法了，用之前必须注入

 然后实时监听窗口onresize,就可以刷新了，下面是全部代码：

APP.vue:

自己封装的Swiper

测试结果：

 大功告成！

第二种方法设置样式还是要用到reload注入，只不过控制图片样式是通过背景图片方式：

 最后测试结果和上面一样，用都说好，就不展示了。

----------------------------------3月9日第二次更新--------------------------------

上面那种方法是通过mouted加window.resize进行实时监听刷新的，但是实际应用中我们要做的是局部刷新，所以需要在router-view加keepalive属性。

一旦加上keepalive属性，mouted就不销毁了。原来的vue会在页面切换就销毁，然后重新执行渲染mounted，但是有时候我们需要记录我们之前在这个页面做的一些操作，比如点击了某样东西，这个东西变色了，加了keepalive之后，跳转到其它页面，再切回来，这个东西还是原来变色的那种样式。

但是keppAlive在带来方便的同时也带来了不会重复mounted，需要手动F5按刷新才有效,下面就是页面加了keepAlive属性后，轮播图不会刷新的样子，因为虽然有检测到窗口变化，但是由于keppAlive属性，reload函数不起作用。

 所以我们此时reload函数失去作用。

所以接下来我想出了第二个方法，就是在检测到窗口变化时实时初始化Swiper，例如下面：

缩小窗口后，得到的是想要的结果：

 但是随之而来的另一个问题是，监听窗口变化这个window.resize这个函数会在窗口发生变化时触发执行，有时候还触发了不止一次，那么重复初始化Swiper之后，它会创建多个实例对象，且不会销毁，看起来切换轮播图的大小虽然没变，但是速度变得是原来的几倍，因为实例化了很多个对象，多个对象在不同时间执行，串在一起时就像开高铁一样快得惊人。

所以有了问题，我们就得解决问题，解决方案那就是：

（1）在创建新的Swiper实例化对象之前先判断上一个是否销毁；

（2）在销毁对象时，判断是否为当前的Swiper实例化对象。

翻译为更加形象一点就是：吃面包的故事。

每天起床第一件事就是吃面包和买面包：

（1）吃面包：判断今天吃的面包是否是今天买的？

（2）买面包：判断昨天的面包吃了没有？

总结起来就是，今天面包今天买，今天吃。每天要吃的面包，每天买，每天吃完。

所以翻译代码为：

 ---------------------------3月10日第三次更新------------------------------------

上面那种方案是组件处于keepalive情况下的，但是有一个问题，就是mouted函数只会触发一次了，因为保持了keepalive属性；当我们退出页面重进后，窗口实时监听就会失效，此时我们应该把监听窗口变化的函数写在activated