解决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>