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

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐