vue路由器视图缓存/不重置数据

我在一个汽车销售网站上工作,并使用vue路由器。

我有一个索引页,其中列出了所有待售汽车的列表,单击后,它们会链接到该特定汽车的单一视图。

我在单视图页面上有一个大的“标题”图像,并将其放在一个具有固定高度的容器中,这样当页面加载时,页面高度就不会跳跃。

当转到这个单一视图时,我会调用API来获取车辆数据,然后希望在标题图像中淡出。

为此,请执行以下操作:

 <div class="singleVehicle__mainImage">
     <span :style="styles" :class="{'imageLoaded' : mainImageLoaded }" v-if="vehicle"></span>
 </div>

 export default {
    data() {
        return {
            vehicle: null,
            styles: {
                backgroundImage: null
            },
            mainImageLoaded: null
        }
    },
    created() {
        this.getVehicle().then(() => {
            this.mainImageBackground();
        });
    },
    methods: {
        mainImageBackground() {
            var source = "IMAGE SOURCE URL";
            this.styles.backgroundImage = "url("+source+")";

            var $this = this;
            var img = new Image();
            img.onload = function() {
                $this.mainImageLoaded = true;
            }
            img.src = source;
            if (img.complete) img.onload();
        }
    }
}

默认情况下,图像包装器内的跨度的不透明度为0,然后,当。添加imageLoaded类。

这很好,但只是在每辆车第一次装载时。图像等待加载,然后淡入。每次加载后,图像都会在加载时弹出,就像imageLoaded类没有重置/离开视图时数据没有重置一样。

清除浏览器缓存时,它会再次工作,但对每个车辆视图只工作一次。