Vue2 Router组件复用：高效解决router-view渲染难题

在Vue2项目中，如何复用router-view组件实例以提升性能，避免不必要的组件重新渲染，是一个常见问题。本文提供一种解决方案，有效避免因重复实例化带来的性能损耗和潜在冲突。

许多开发者尝试通过访问route.matched获取当前组件实例，并利用$vnode实现复用。然而，这种方法存在缺陷：将router-view内容“迁移”后，路由切换会将新组件渲染到迁移后的位置，导致界面混乱。这是因为直接操作$vnode改变了渲染位置，而非复用实例本身。

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

实际上，Vue提供了更优雅的组件复用机制。关键在于组件层面复用，而非$vnode层面操作。我们可以创建一个新组件，负责接收和渲染需要复用的组件实例。该组件接收一个prop，即需要复用的组件实例。路由切换时，只需更新此prop的值即可实现复用。router-view仍在其原位置渲染，我们只需控制新组件接收的实例。

立即学习“前端免费学习笔记（深入）”；

这种方法避免了直接操作$vnode的副作用，更符合Vue的组件化思想。它不仅有效复用组件实例，也保持了路由的正常工作机制，避免了将后续路由渲染到新组件中的问题。通过这种组件层面的复用，我们实现了在不重新实例化组件的情况下，将router-view当前渲染的实例渲染到新组件中，并解决了原方案中的路由冲突问题，最终达到优化性能的目的。