vue3实现父路由进入子路由，父路由不刷新，子路由返回父路由时，父路由刷新

引用\[1\]:在Vue3中，当父路由进入子路由，父路由不刷新，子路由返回父路由时，父路由会刷新的问题可以通过以下方法解决。首先，删除App.vue中router-view的key值，这样路由地址改变时不会刷新整个路由组件。然后，在子模块的跟组件中根据需求设置router-view的key值，可以设置为route.path或route.fullPath等。这样就可以实现从子路由返回父路由时，只更新中间内容组件，而侧边菜单组件保持当前状态。\[1\]

引用\[2\]:另外，还可以封装一个方法来解决这个问题。可以创建一个名为RouterReplaceComp的函数，接受一个组件作为参数。在函数内部，通过获取当前页面组件并将其改为自己的组件，判断当前渲染页面是否为自己的组件。根据判断结果，使用defineAsyncComponent创建一个在需要时才会加载的异步组件，或者渲染当前路由所对应的页面。这样就可以实现只渲染需要的页面内容。\[2\]

引用\[3\]:在路由配置中，可以使用上述封装的RouterReplaceComp方法来替换需要实现该功能的组件。通过设置子路由的component为RouterReplaceComp(() => import('../views/test/testA.vue'))，并在子路由的children中继续设置需要的子路由。这样就可以实现父路由进入子路由时，父路由不刷新，子路由返回父路由时，父路由刷新的效果。\[3\]
#### 引用[.reference_title]
- *1* [vue router切换子路由，父路由对应组件也被刷新问题](https://blog.csdn.net/lingliu0824/article/details/124946539)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [Vue3——子路由路径时仅渲染子路由页面不渲染父路由页面](https://blog.csdn.net/weixin_44593720/article/details/118020585)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]