Vue3切换路由白屏刷新后才显示页面内容

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里面。（这就是导致出现白屏的问题所在）人都麻了