跳到主要内容
Nuxt 中文
开始使用

<NuxtLayout>

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

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

app/app.vue
<template>
  <NuxtLayout>
    一些页面内容
  </NuxtLayout>
</template>
阅读更多

Props

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

附加 Props

NuxtLayout 也接受你可能需要传给布局的任何附加 props。这些自定义 props 之后会作为属性可用。

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

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

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

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

来自页面元数据的布局 Props

当使用对象语法通过 definePageMeta 指定 layout 时，props 会自动传给布局组件。布局可以通过 defineProps 接收它们：

app/pages/dashboard.vue
<script setup lang="ts">
definePageMeta({
  layout: {
    name: 'admin',
    props: {
      sidebar: true,
    },
  },
})
</script>
app/layouts/admin.vue
<script setup lang="ts">
const props = defineProps<{
  sidebar?: boolean
}>()
</script>
阅读更多

阅读更多关于向布局传递 props 的内容。 :

过渡

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

app/pages/index.vue
<template>
  <div>
    <NuxtLayout name="custom">
      <template #header>
        一些头部模板内容。
      </template>
    </NuxtLayout>
  </div>
</template>
app/layouts/custom.vue
<template>
  <div>
    <!-- 命名插槽 -->
    <slot name="header" />
    <slot />
  </div>
</template>

:

阅读更多

布局 Ref

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

app/app.vue
<script setup lang="ts">
const layout = ref()

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

<template>
  <NuxtLayout ref="layout">
    default layout
  </NuxtLayout>
</template>
app/layouts/default.vue
<script setup lang="ts">
const foo = () => console.log('foo')
defineExpose({
  foo,
})
</script>

<template>
  <div>
    default layout
    <slot />
  </div>
</template>

:

阅读更多