解决vue3 路由切换后,页面不显示内容,刷新后正常显示(路由切换白屏的问题)
·
正常使用时切换路由都可以正常地切换页面,但是页面长时间无操作就会浮现该问题。使用导航切换路由,路由可以正常跳转,地址栏有变化,但页面不显示。
排查:
1、控制台无报错
2、切换的各级页面均有根标签节点包裹
解决办法:
在router-view 中给路由添加key标识。
!!注意:有使用layout封装布局的,是在layout下的主页面中的 router-view 添加标识,不是在src根目录下main.vue中修改(在这个文件修改会造成每次切换路由导航标签都会收起)
<script setup lang="ts">
import { useTagsViewStore } from "@/store/modules/tagsView";
import { useRoute} from "vue-router";
const tagsViewStore = useTagsViewStore();
const route = useRoute();
const key = computed(() => {
return route.path + Math.random();
});
</script>
<template>
<section class="app-main">
<router-view v-slot="{ Component, route }" :key="key">
<transition name="router-fade" mode="out-in">
<keep-alive :include="tagsViewStore.cachedViews">
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</transition>
</router-view>
</section>
</template>
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)