重新访问 Nuxt.js 中的页面时如何不重新渲染组件？

Question

当我访问另一个页面并返回时，我想表达我拥有的 Google 地图坐标和数据。使用Store需要处理大量数据，因此使用起来很困难。我想知道是否有一种方法可以回收页面而不从 DOM 中删除它们。

Answer 1

如果您希望在导航时按原样保留页面内容，您可以使用keep-alive它将缓存路线内容。请参阅此处的文档。

然而，我个人的经验是，缓存 Vue 或 Nuxt 页面keep-alive有时会导致我的应用程序出现意外错误，因为我经常在编写代码时期望在data()中定义的所有值都将具有默认值。但缓存组件时情况并非如此。正如您所说，当获取一些昂贵的数据时，通常会出现此要求。我更喜欢缓存此获取结果（主要在本地存储中）或 Vuex Store 中。然后，我们可以在离开时安全地销毁该组件，并在返回时重用缓存的数据，但该组件将使用默认的data()进行初始化。