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

【问题标题】：How to not rerender a component when revisiting a page in Nuxt.js?在 Nuxt.js 中重新访问页面时如何不重新渲染组件？
【发布时间】：2020-12-06 18:33:27
【问题描述】：

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

【问题讨论】：

标签： vue.js nuxtjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

但是，没有办法防止vuex store中存储大量数据。

【讨论】：

谢谢 Ballon Ura :)