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

Question

In Nuxt Framework using SPA mod, I have a default layout:

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

In the example above, <my-header> and <my-footer> are the components I created.

I want them to initialize and render only once. After changing the router, they will not render again.

Answer 1

Assuming the code you provided is located in layouts > default.vue, for example, and that you did not change the default settings within the .nuxt folder, it will render only once.

Only what is within the <nuxt /> will change - that will be the content of your app in general. Basically it will display the page components (used only in layouts - ref ).

So in this case, as long as you do not refresh the page the header and footer will not be rerendered. When moving between the pages you might want to use nuxt-link ( ref ) and not force the reload (leave it at default settings).

Example nuxt-link usage:

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

The about page would be located in:

pages > about > index.vue