如何在 NuxtJS 中只渲染一次组件？

Posted 2023-02-23

【中文标题】如何在 NuxtJS 中只渲染一次组件？

【英文标题】：How to render components only once in NuxtJS?

【发布时间】：2020-11-25 04:56:38

【问题描述】：

在使用 SPA mod 的 Nuxt 框架中， 我有一个默认布局：

<template>
  <div id="wrapper">
    <my-header />
    <nuxt />
    <my-footer />
  </div>
</template>

在上面的示例中，<my-header> 和 <my-footer> 是我创建的组件。

我希望它们只初始化和渲染一次。 更改路由器后，它们将不再渲染。

【问题讨论】：

您的页脚和页眉不会重新呈现。如果您更改布局，它们只会重新渲染

【参考方案1】：

例如，假设您提供的代码位于 layouts > default.vue 中，并且您没有更改 .nuxt 文件夹中的默认设置，它只会呈现一次。

只有<nuxt /> 中的内容会发生变化——这将是您应用程序的一般内容。基本上它将显示页面组件（仅用于布局 - ref）。

所以在这种情况下，只要不刷新页面，页眉和页脚就不会重新呈现。在页面之间移动时，您可能希望使用 nuxt-link (ref) 而不是强制重新加载（保留默认设置）。

nuxt-link 用法示例：

<nuxt-link to="/about">About page</nuxt-link>

关于页面将位于：

pages > about > index.vue

【讨论】：

感谢您的信息，但我希望它不会重新呈现为页面之间的变化:(

如果您使用nuxt-link 在页面之间切换，则在这种情况下（如上所述）页眉和页脚不会重新呈现。

也许你重新加载你的页面！例如，通过使用

也许你误会了我。我正在使用 nuxt 路由器。例如，我在 my-header 中的 created() 钩子中使用 console.log('go here')，当路由器推送在页面之间切换时，我不希望该组件被重新渲染（不运行代码创建（））

@AlberZ 你是如何在页面之间切换的，你能举个例子吗？默认情况下，布局将只运行一次，第一次应用程序初始化时，如果页眉和页脚放置在那里，这意味着它将只安装和创建一次。问题在于您在前面提到的页面之间切换的方式。