问题：vue3 路由切换后，页面不显示内容，刷新后正常显示（路由切换白屏的问题）

本文主要是介绍问题：vue3 路由切换后，页面不显示内容，刷新后正常显示（路由切换白屏的问题），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题

在项目开发中，有一个页面出现跳转其他页面不显示的问题，但刷新后页面时正常显示的，其他页面跳转该页面是可以展示的问题

分析

解决办法：
在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>

这篇关于问题：vue3 路由切换后，页面不显示内容，刷新后正常显示（路由切换白屏的问题）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---