正常使用时切换路由都可以正常地切换页面,但是页面长时间无操作就会浮现该问题。使用导航切换路由,路由可以正常跳转,地址栏有变化,但页面不显示。
排查:
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>