<NuxtLayout>

源文件
Nuxt 提供了 <NuxtLayout> 组件来在页面和错误页面中显示布局。

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

app/app.vue
<template>
  <NuxtLayout>
    some page content
  </NuxtLayout>
</template>
在 文档 > 4 X > 目录结构 > 应用 > 布局 中阅读更多内容。

属性

  • name: 指定要渲染的布局名称，可以是字符串、响应式引用或计算属性。它必须与 app/layouts/ 目录中相应布局文件的名称相匹配，或者为 false 以禁用布局。
    • type: string | false
    • default: default
app/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 布局进行渲染。它必须与 app/layouts/ 目录中相应布局文件的名称相匹配。
    • 类型：string
    • default: null

附加 Props

NuxtLayout 还接受您可能需要传递给布局的任何附加属性。这些自定义属性随后作为 attributes 暴露出来。

app/pages/some-page.vue
<template>
  <div>
    <NuxtLayout
      name="custom"
      title="I am a custom layout"
    >
      <!-- ... -->
    </NuxtLayout>
  </div>
</template>

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

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

console.log(layoutCustomProps.title) // I am a custom layout
</script>

过渡

<NuxtLayout /> 通过 <slot /> 渲染传入的内容，该插槽随后被包裹在 Vue 的 <Transition /> 组件周围以激活布局过渡。为确保此功能按预期工作，建议 <NuxtLayout />不是页面组件的根元素。

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header>
        Some header template content.
      </template>
    </NuxtLayout>
  </div>
</template>
在文档 > 4 X > 入门 > 过渡中阅读更多内容。

布局的 Ref

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

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

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

<template>
  <NuxtLayout ref="layout">
    default layout
  </NuxtLayout>
</template>
在 文档 > 4 X > 目录结构 > 应用 > 布局 中阅读更多内容。