【vue3】【router】跳转页面渲染两次问题

最近做一款毕设遇到一个问题：如图所示部分是因为渲染了两次组件导致执行了两次onMounted加载了相同数据。

 router.ts 以下是我的路由相关配置：

 default布局：keepalive

 App.vue

 最后导致这个原因正是因为布局组件default.vue和App.vue同时使用了keepalive，只要任意一边取消即可。
注意：取消default的keepalive意味着子组件不能被keepalive，所以这里把App.vue的keepalive关了，因为布局不需要被缓存。