如何在 Nuxt.js 中重新访问页面时不重新呈现组件？

Question

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

中删除页面的情况下回收页面

Answer 1

您可以使用 keep-alive 属性： https://nuxtjs.org/docs/2.x/features/nuxt-components#keep-alive 然后你的 mounted 生命周期将只调用一次。

但是，vuex store.

中存储大量数据没有任何预防措施

Answer 2

如果您希望在导航时按原样保留页面内容，您可以使用 keep-alive 来缓存路由内容。请参阅文档 here.

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

进行初始化。