v3.17
GitHub

<NuxtLayout>

源代码
Nuxt 提供了 <NuxtLayout> 组件用于在页面和错误页面上展示布局。

您可以使用 <NuxtLayout /> 组件在 app.vue 或 error.vue 上激活 default 布局。

app.vue
<template>
  <NuxtLayout>
    页面内容
  </NuxtLayout>
</template>
Read more in Docs > Guide > Directory Structure > Layouts.

属性

  • name: 指定要渲染的布局名称，可以是字符串、响应式引用或计算属性。它 必须 与 layouts/ 目录中对应的布局文件名称匹配。
    • 类型: string
    • 默认: default
pages/index.vue
<script setup lang="ts">
// layouts/custom.vue
const layout = 'custom'
</script>

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>
请注意，布局名称会被标准化为 kebab-case，因此如果您的布局文件名为 errorLayout.vue，在作为 name 属性传递给 <NuxtLayout /> 时，它将变为 error-layout。
error.vue
<template>
  <NuxtLayout name="error-layout">
    <NuxtPage />
  </NuxtLayout>
</template>
了解更多关于动态布局的内容。
  • fallback: 如果向 name 属性传递了无效的布局，将不会渲染任何布局。在这种情况下，指定一个 fallback 布局进行渲染。它 必须 与 layouts/ 目录中对应的布局文件名称匹配。
    • 类型: string
    • 默认: null

其他属性

NuxtLayout 还接受任何您可能需要传递给布局的其他属性。这些自定义属性将作为属性提供。

pages/some-page.vue
<template>
  <div>
    <NuxtLayout name="custom" title="我是一个自定义布局">
      <-- ... -->
    </NuxtLayout>
  </div>
</template>

在上面的示例中，title 的值可以通过 $attrs.title 在模板中访问，或在 <script setup> 中通过 useAttrs().title 访问，在 custom.vue 中。

layouts/custom.vue
<script setup lang="ts">
const layoutCustomProps = useAttrs()

console.log(layoutCustomProps.title) // 我是一个自定义布局
</script>

过渡效果

<NuxtLayout /> 通过 <slot /> 渲染传入的内容，然后将其包装在 Vue 的 <Transition /> 组件中以激活布局过渡效果。为了让其按预期工作，建议 <NuxtLayout /> 不是 页面组件的根元素。

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header> 一些头部模板内容。 </template>
    </NuxtLayout>
  </div>
</template>
Read more in Docs > Getting Started > Transitions.

布局的引用

要获取布局组件的引用，通过 ref.value.layoutRef 访问它。

<script setup lang="ts">
const layout = ref()

function logFoo () {
  layout.value.layoutRef.foo()
}
</script>

<template>
  <NuxtLayout ref="layout">
    默认布局
  </NuxtLayout>
</template>
Read more in Docs > Guide > Directory Structure > Layouts.