当前位置：首页 > news >正文

【Nuxt】Layout 布局和渲染模式

news 2025/7/10 23:28:54

NuxtLayout

app.vue

  <NuxtLayout><NuxtPage/></NuxtLayout>

然后默认的布局需要写在 ~/layouts/default.vue 下面，其他自定义的布局也在写在 layouts 目录下。

default.vue

<template><div class="app-container"><div class="header">Header</div><slot></slot><div class="footer">Footer</div></div>
</template>
<script setup></script>
<style scoped>
.header {background-color: #6dedc4;padding: 10px;text-align: center;
}
.footer {background-color: #55abd2;padding: 10px;text-align: center;
}
</style>

这样所有页面都使用了默认布局，slot 插槽里面内容是路由变化带来的。

如果不希望所有页面都使用默认布局，还可以用自定义布局:

<script setup lang="ts">
definePageMeta({layout: 'custom'
})
</script><template>
<div>login</div>
</template><style scoped></style>

custom.vue

<script setup lang="ts"></script><template><div><p>自定义布局</p><slot /></div>
</template><style scoped></style>

此外 NuxtLayout 还有一个属性 name, 可以指定某个样式作为内部 NuxtPage 的布局，但是它的优先级要高于 definePageMeta.layout 。

所以如果给上述加上 name，则 login 页面的自定义布局失效。

在这里插入图片描述

渲染模式

在这里插入图片描述

    // ssr: false,// Experimental APIrouteRules: {'/': {ssr: true},'/about': {ssr: false},'/cart': {static: true}, // 只会在构建时生成一次静态页面'/checkout': {swr: true}, // 只会生成多次静态页面 自动重新验证页面的时候需要重新生成}