1.首先检查页面路由以及页面路径配置是否配置错误。
在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>
2.如果页面刷新可以出来那证明不是配置的问题,其次检查是否在根组件标签最外层包含了个最大的div盒子包裹内容。(一般vue3是可以不使用div盒子包裹的)
3.最后如果发现上面都没有问题,那么问题就在这里了,看看是否在template标签下面直接有注释,如果有需要把注释写到div里面。(这就是导致出现白屏的问题所在)人都麻了