优化路由切换白屏问题
This commit is contained in:
12
src/App.vue
12
src/App.vue
@@ -3,7 +3,17 @@
|
|||||||
<!-- 开启水印 -->
|
<!-- 开启水印 -->
|
||||||
<el-watermark :font="{ color: fontColor }" :content="watermarkEnabled ? defaultSettings.watermarkContent : ''"
|
<el-watermark :font="{ color: fontColor }" :content="watermarkEnabled ? defaultSettings.watermarkContent : ''"
|
||||||
:z-index="9999" class="wh-full">
|
:z-index="9999" class="wh-full">
|
||||||
<router-view />
|
<!-- 🔴 修改开始:使用 v-slot 处理路由组件 -->
|
||||||
|
<router-view v-slot="{ Component, route }">
|
||||||
|
<!--
|
||||||
|
1. 使用 <transition> 包裹,防止渲染冲突
|
||||||
|
2. 加上 :key="route.path" 强制 Vue 在路由变化时重新渲染,避免复用导致的空白
|
||||||
|
-->
|
||||||
|
<transition name="fade" mode="out-in">
|
||||||
|
<component :is="Component" :key="route.path" />
|
||||||
|
</transition>
|
||||||
|
</router-view>
|
||||||
|
<!-- 🟢 修改结束 -->
|
||||||
</el-watermark>
|
</el-watermark>
|
||||||
</el-config-provider>
|
</el-config-provider>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user