vue路由切换时不同页面的背景图片加载出现闪白

在 Vue 中，当路由切换导致页面内容变化时，新的页面组件可能会先渲染出来，而其对应的背景图片由于请求还在途中，可能会导致页面有一段时间显示空白或闪现白屏。这是因为浏览器会先绘制已有的 DOM 内容，而在图片加载完成之前，这部分区域的内容通常是默认颜色或者之前页面的内容。

解决这个问题，可以采取以下几种策略：

1. **预加载**: 使用 `v-if` 或者 `lazy` 模块提前加载背景图片，确保在页面进入可视区域前已经下载完毕。

<template>
  <div v-if="backgroundImage" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"></div>
</template>

<script>
export default {
  data() {
    return {
      backgroundImage: '',
    };
  },
  created() {
    this.backgroundImage = require('@/assets/bg.jpg');
  },
};
</script>

2. **懒加载**: 对于非首屏或不太重要的背景图，可以考虑使用懒加载库如 vue-lazyload，让图片在滚动到可视范围内再加载。

3. **CSS 遮罩**: 可以添加一个临时的 CSS 层，在页面切换时覆盖整个视口，直到所有背景图片都加载完再移除这个层。

4. **优化网络请求**：确保图片资源的压缩和优化，减少加载时间。

5. **路由钩子函数**：在 Vue Router 的生命周期钩子中处理图片加载，比如 `beforeRouteEnter` 和 `mounted`，确保图片在页面完全渲染后再设置背景。