优化路由切换白屏问题
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 : ''"
|
||||
: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-config-provider>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user