随着 Vue.js 的崛起，Vue Router 作为 Vue.js 的官方路由管理器越来越被广泛应用。随着前端应用的复杂度不断提升，动态缓存组件和解决组件重复渲染成为了很多开发者面临的难题。本文将详细介绍 Vue-router 组件动态缓存以及如何解决组件重复渲染的坑，并提供相应的示例代码。
组件动态缓存
Vue-router 提供了一个非常有用的功能——动态缓存组件，它可以使被缓存的组件在离开时被保留在内存中，这样在下一次访问该组件时，就不需要重新渲染它了。这在组件复用和优化方面是非常有用的。在 Vue-router 中，可以通过给路由配置对象添加 keep-alive属性来实现组件的缓存。
例子
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
-
----- ----
---------- -----
----- -
---------- ---- -- ----
-
--
-
----- ---------
---------- -----
-
-
--上面的代码中，Home 组件被配置为缓存组件，每一次访问该组件时，都会将其保存到内存中，下一次再访问该组件时，就可以直接使用缓存中的版本。
解决组件重复渲染的坑
在 Vue-router 中，很多开发者会遇到一个问题：当切换到同一个路由时，组件会重新渲染。这是因为路由的组件实例并没有被销毁，所以在下一次访问该组件时，会重新渲染一次，导致重复渲染。为了解决这个问题，我们需要在路由实例中添加一个 key 属性，从而确保每一个组件实例的唯一性，这样就能避免组件的重复渲染了。
例子
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
-
----- ----
---------- -----
----- -
---------- ---- -- ----
--
-- -- ---
---- ------
--
-
----- ---------
---------- -----
-
-
--在上面的例子中，我们为 Home 组件添加了一个 key 属性，它的值为 'home'。这样，Vue-router 就能根据每一个组件实例的 key 属性来区分它们，从而避免组件的重复渲染。
结论
以上是对 Vue-router 组件动态缓存及解决组件重复渲染的坑的简要介绍。组件缓存和组件渲染是 Vue.js 和 Vue-router 中常用的功能，开发者在使用时需格外注意，通过添加 keep-alive 属性和 key 属性可以避免组件的重复渲染问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6711c31aad1e889fe200a848