vue3 路由切换后，页面不显示内容，刷新后正常显示

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

前言：这个白屏问题我是第一次遇到，所以想完整记录一下，本文也借鉴了一下别人的文章。

一、问题

在vue3的项目中，跳转其他页面时，路由变化，但页面不显示，控制台无报错，手动刷新后正常显示。

二、解决方法

在router-view 中给路由添加唯一标识key
理由：
①不设置key，vue会复用相同组件，在路由来回切换时会导致页面不刷新，因为不再执行created 和 mounted钩子函数；
②设置key，切换路由时key不同，相关的钩子函数被正确触发，组件被重新创建。

注：项目若使用layout封装布局，要在layout文件夹下的主页面的router-view上加key，例如我的是src\layout\components\AppMain.vue。刚开始我在src\App.vue中的router-view上添加key，也可以达到效果，但是切换页面会导致导航栏收起再打开，视觉效果不好（具体文件路径以自己项目为准）
原因：
①在src\App.vue中添加，影响整个应用范围内的路由组件，包括导航栏都会被重新创建，所以导航栏会关闭再打开；
②在src\layout\components\AppMain.vue中添加，key只会影响AppMain.vue内部包含的组件，而不会影响外部的导航栏等组件。

代码如图：

最后讨论下，选择使用 $route.path 还是 $route.fullPath作为key？

• $route.path：只包含路径部分，不包含查询参数或hash值。例如，对于路由/user/1， $route.path的值是/user/1；
• $route.fullPath：包含完整的路径、查询参数和 hash 值。例如，对于路由 /user/1?name=John#profile， $route.fullPath 的值就是 /user/1?name=John#profile。

频繁地重新创建组件可能会导致性能问题，在某些情况下可能都不需要key，vueRouter默认会复用相同的组件，这可以提高性能，只有在确实需要强制创建组件实例时，才应该使用key属性。
综上所述，应该根据具体需求来选择使用 $route.path 还是 $route.fullPath 作为 key 属性。在大多数情况下，使用 $route.path 应该就足够了。