修复transition组件导致的白屏(重现: 热更新transition下的组件script代码切换tab即可)

This commit is contained in:
maxbad 2023-08-15 16:12:24 +08:00
parent 14ea36481c
commit 71578ab6f5
2 changed files with 6 additions and 5 deletions

View File

@ -136,7 +136,7 @@
import { deepMerge } from '@/utils'; import { deepMerge } from '@/utils';
export default defineComponent({ export default defineComponent({
name: 'BasicUpload', name: 'BasicForm',
components: { DownOutlined, UpOutlined, QuestionCircleOutlined }, components: { DownOutlined, UpOutlined, QuestionCircleOutlined },
props: { props: {
...basicProps, ...basicProps,

View File

@ -1,26 +1,27 @@
<template> <template>
<RouterView> <RouterView>
<template #default="{ Component, route }"> <template #default="{ Component, route }">
{{ retryKeepAlive(route) }}
<template v-if="mode === 'production'"> <template v-if="mode === 'production'">
<transition :name="getTransitionName" mode="out-in" appear> <transition :name="getTransitionName" appear mode="out-in">
<keep-alive v-if="keepAliveComponents.length" :include="keepAliveComponents"> <keep-alive v-if="keepAliveComponents.length" :include="keepAliveComponents">
<component :is="Component" :key="route.fullPath" /> <component :is="Component" :key="route.fullPath" />
</keep-alive> </keep-alive>
<component v-else :is="Component" :key="route.fullPath" /> <component :is="Component" v-else :key="route.fullPath" />
</transition> </transition>
</template> </template>
<template v-else> <template v-else>
<keep-alive v-if="keepAliveComponents.length" :include="keepAliveComponents"> <keep-alive v-if="keepAliveComponents.length" :include="keepAliveComponents">
<component :is="Component" :key="route.fullPath" /> <component :is="Component" :key="route.fullPath" />
</keep-alive> </keep-alive>
<component v-else :is="Component" :key="route.fullPath" /> <component :is="Component" v-else :key="route.fullPath" />
</template> </template>
</template> </template>
</RouterView> </RouterView>
</template> </template>
<script> <script>
import { defineComponent, computed, unref } from 'vue'; import { computed, defineComponent, unref } from 'vue';
import { useAsyncRouteStore } from '@/store/modules/asyncRoute'; import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
import { useProjectSetting } from '@/hooks/setting/useProjectSetting'; import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';