如何在NuxtJS中仅渲染一次组件?

时间:2020-08-05 03:30:49

标签: javascript vue.js vue-component nuxt.js vue-router

在使用SPA mod的Nuxt Framework中, 我有一个默认布局:

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

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

我希望它们仅初始化和渲染一次。 更换路由器后,它们将不会再次呈现。

1 个答案:

答案 0 :(得分:1)

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

只有<nuxt />中的内容会发生变化-通常,这就是您应用程序的内容。基本上,它将显示页面组件(仅在布局-ref中使用)。

因此,在这种情况下,只要不刷新页面,页眉和页脚就不会重新呈现。在页面之间移动时,您可能要使用nuxt-linkref)而不是强制重新加载(将其保留为默认设置)。

示例nuxt-link的用法:

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

“关于”页面位于:

页面>关于> index.vue