<NuxtLayout>

Nuxt 提供了 <NuxtLayout> 组件,用于在页面和错误页面上显示布局。

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

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

Props

  • name:指定要渲染的布局名称,可以是字符串、响应式引用(reactive reference)或计算属性。它必须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,传递给 <NuxtLayout />name 属性时会变为 error-layout
error.vue
<template>
  <NuxtLayout name="error-layout">
    <NuxtPage />
  </NuxtLayout>
</template>
阅读更多关于动态布局的内容。
  • fallback:如果传递给 name 属性的布局无效,则不会渲染任何布局。可以指定一个 fallback 布局用于这种情况。它必须layouts/ 目录中对应布局文件的名称相匹配。
    • 类型string
    • 默认值null

额外 Props

NuxtLayout 也接受你可能需要传递给布局的任何额外属性。然后这些自定义属性会作为属性(attributes)被访问。

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

在上述示例中,title 的值将可以通过模板中的 $attrs.title<script setup> 中的 useAttrs().titlecustom.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

要获取布局组件的 ref,可以通过 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.