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



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

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

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

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

假设您提供的代码位于layouts>default.vue,并且您没有更改.nuxt文件夹中的默认设置,它将只渲染一次。

只有<nuxt />中的内容才会改变——这将是您应用程序的总体内容。基本上,它将显示页面组件(仅在layouts-ref中使用(。

因此,在这种情况下,只要不刷新页面,页眉和页脚就不会被重新绘制。在页面之间移动时,您可能希望使用nuxt-link(ref(,而不是强制重新加载(保持默认设置(。

示例nuxt-link用法:

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

关于页面将位于:

页面>大约>index.vue

最新更新