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

Question

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

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

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

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

Answer 1

例如，假設您提供的代碼位於 layouts > default.vue 中，並且您沒有更改.nuxt文件夾中的默認設置，它只會呈現一次。

只有<nuxt />中的內容會改變 - 這將是您應用程序的一般內容。 基本上它將顯示頁面組件（僅在布局中使用 - ref ）。

所以在這種情況下，只要不刷新頁面，header 和頁腳就不會被重新渲染。 在頁面之間移動時，您可能希望使用nuxt-link ( ref ) 而不是強制重新加載（將其保留為默認設置）。

示例nuxt-link用法：

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

關於頁面將位於：

頁面 > 關於 > index.vue