一、问题
在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.fullPath作为key？
- [route.path](https://v3.router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1)：只包含路径部分，不包含查询参数或hash值。例如，对于路由/user/1， route.path的值是/user/1；
- [route.fullPath](https://v3.router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1)：包含完整的路径、查询参数和 hash 值。例如，对于路由 /user/1?name=John#profile， route.fullPath 的值就是 /user/1?name=John#profile。
频繁地重新创建组件可能会导致性能问题，在某些情况下可能都不需要key，vueRouter默认会复用相同的组件，这可以提高性能，只有在确实需要强制创建组件实例时，才应该使用key属性。
综上所述，应该根据具体需求来选择使用 route.fullPath 作为 key 属性。在大多数情况下，使用 $route.path 应该就足够了。