vue3项目中，iframe嵌套路由，加载过程中出现白屏闪一下，如何在iframe加载期间，给其设置一个临时的背景颜色或渐变

在 Vue3 项目中，当使用 iframe 嵌套并引入路由时，如果在路由跳转导致 iframe 内容加载前出现短暂的白屏，你可以通过 CSS 动画或者 JavaScript 来改善用户体验。这里提供一种简单的解决方案：

1. **CSS 动画**:
- 在外部样式表中，为 iframe 创建一个 `transition` 动画，比如设置一个从透明度到不透明度的变化，并添加一个默认的背景颜色或渐变，如 `.iframe-loading` 类。

   .iframe-loading {
     background-color: rgba(0, 0, 0, 0.5); /* 设置半透明黑色 */
     transition: opacity 0.3s; /* 缩短过渡时间以减少闪烁 */
   }

2. **JavaScript**:
- 使用 Vue 的 `v-if` 或者 `v-show` 绑定一个布尔值来控制 iframe 是否显示加载状态。
- 当路由正在加载时，将这个布尔值设为 `true`，显示 loading 状态；加载完成后设为 `false`。

   <div class="loading-mask" v-if="isLoading">
     <iframe :src="'your-url-here'" class="iframe-loading"></iframe>
   </div>

然后在 Vue 实例中处理路由变化：

   export default {
     data() {
       return {
         isLoading: true,
       };
     },
     mounted() {
       // 在组件挂载时开始监听路由变化
       this.$router.onReady(() => {
         this.isLoading = false;
       });
     },
     // ...其他生命周期钩子和业务逻辑
   };

当你完成了上述步骤，加载过程中的白屏应该会被隐藏或减轻。