fix: transition组件热重载显示页面空白bug
This commit is contained in:
@@ -3,18 +3,21 @@
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition :name="setTransitionName" mode="out-in">
|
||||
<keep-alive :include="getKeepAliveNames" v-if="showView">
|
||||
<component :is="Component" :key="state.refreshRouterViewKey" class="w100" v-show="!isIframePage" />
|
||||
<div>
|
||||
<component :is="Component" :key="state.refreshRouterViewKey" class="w100" v-show="!isIframePage" />
|
||||
</div>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
<transition :name="setTransitionName" mode="out-in">
|
||||
<Iframes class="w100" v-show="isIframePage" :refreshKey="state.iframeRefreshKey" :name="setTransitionName" :list="state.iframeList" />
|
||||
<Iframes class="w100" v-show="isIframePage" :refreshKey="state.iframeRefreshKey" :name="setTransitionName"
|
||||
:list="state.iframeList" />
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="layoutParentView">
|
||||
import { defineAsyncComponent, computed, reactive, onBeforeMount, onUnmounted, nextTick, watch, onMounted,ref,provide } from 'vue';
|
||||
import { defineAsyncComponent, computed, reactive, onBeforeMount, onUnmounted, nextTick, watch, onMounted, ref, provide } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useKeepALiveNames } from '/@/stores/keepAliveNames';
|
||||
@@ -44,13 +47,13 @@ const showView = ref(true)
|
||||
/**
|
||||
* 刷新页面
|
||||
*/
|
||||
const refreshView=function () {
|
||||
showView.value = false // 通过v-if移除router-view节点
|
||||
nextTick(() => {
|
||||
showView.value = true // DOM更新后再通过v-if添加router-view节点
|
||||
})
|
||||
const refreshView = function () {
|
||||
showView.value = false // 通过v-if移除router-view节点
|
||||
nextTick(() => {
|
||||
showView.value = true // DOM更新后再通过v-if添加router-view节点
|
||||
})
|
||||
}
|
||||
provide('refreshView',refreshView)
|
||||
provide('refreshView', refreshView)
|
||||
|
||||
// 设置主界面切换动画
|
||||
const setTransitionName = computed(() => {
|
||||
@@ -105,7 +108,7 @@ onMounted(() => {
|
||||
});
|
||||
// 页面卸载时
|
||||
onUnmounted(() => {
|
||||
mittBus.off('onTagsViewRefreshRouterView', () => {});
|
||||
mittBus.off('onTagsViewRefreshRouterView', () => { });
|
||||
});
|
||||
// 监听路由变化,防止 tagsView 多标签时,切换动画消失
|
||||
// https://toscode.gitee.com/lyt-top/vue-next-admin/pulls/38/files
|
||||
|
||||
Reference in New Issue
Block a user