vue-router 查看缓存/不重置数据

Question

我在汽车销售网站上工作并使用 vue-router。

我有一个索引页面，其中包含所有待售汽车的列表，然后单击它们 link 到该特定车辆的单一视图。

我在单视图页面上有一个大的 'header' 图片，并将其放在一个固定高度的容器中，这样当页面加载时页面高度就不会跳动。

在转到这个单一视图时，我执行了一个 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 class 时转换为 1。

这工作正常，但只有第一次加载每辆车。图像等待加载然后淡入。每隔一段时间，图像加载时就会弹出，几乎就像 imageLoaded class 没有被重置/离开视图时数据没有被重置。

清除浏览器缓存时，它会再次起作用，但对每个车辆视图一次。

Answer 1

这可能是由于您的 v-if="vehicle"。车辆呼叫可能需要更长的时间，因此在添加 class 或与此相关的一些时间问题之前不会显示跨度。

vue-router 查看缓存/不重置数据

vue-router view caching / not resetting data

vue.js

vue-router