工作遇到的坑之vue3路由切换时，页面不正常显示，刷新后正常显示（路由切换白屏问题）

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

今天早上敲代码，写完一个二级页面之后，发现切换页面时，我写的页面出现白屏，刷新又能正常显示，这纠结了很久，发现了一个神奇的方法，既简单和解决起来快捷，于是我就打开伟大的CSDN，决定发布一般文章，把这个方法分享给有需要的程序猿们，废话不多说，进入正题：

解决前：

<router-view v-slot="{ Component }" ><transition name="fadeRouter" mode="out-in"><keep-alive :include="caches"><component :is="Component" /></keep-alive></transition></router-view>

解决后： 

<router-view v-slot="{ Component }" :key="key"><transition name="fadeRouter" mode="out-in"><keep-alive :include="caches"><component :is="Component" /></keep-alive></transition></router-view>

观察以上两段代码，找出不同之处。

细心的小伙伴已经发现了，解决前和解决后的代码，在 router-view标签中，多出了key标识，那我们去思考一下，为什么加key之后，就会解决白屏问题呢？

首先，在这里我来从两种情况去解释一下key

1.<router-view />不设置key

其实vue在执行的过程中，会复用相同的主件，对于路由有多个子路由来说，当在子路由来回切换时，会导致页面不刷新的问题，这是因为不再执行created和mounted这些钩子函数，可以通过watch来监听$route的变化从而加载不同的组件。

2.<router-view />设置key

通过设置key值，从而避免了组件复用，子路由间来回切换时，页面都会重新加载。

关注博主，下期一起探讨router-view，加key有大坑这个话题

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

---