<NuxtLayout>
Nuxt 提供了 <NuxtLayout> 组件,用于在页面和错误页面上显示布局。
你可以使用 <NuxtLayout />
组件在 app.vue
或 error.vue
上激活 default
布局。
app.vue
<template>
<NuxtLayout>
一些页面内容
</NuxtLayout>
</template>
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().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>
<template>
<div>
<!-- 命名插槽 -->
<slot name="header" />
<slot />
</div>
</template>
布局的 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>
<script setup lang="ts">
const foo = () => console.log('foo')
defineExpose({
foo
})
</script>
<template>
<div>
默认布局
<slot />
</div>
</template>