使用 Vue & UI Pro 的仪表板模板

layouts

Nuxt 提供了一个布局框架,可以将常见的 UI 模式提取到可重用的布局中。

为了获得最佳性能,此目录中的组件将在使用时通过异步导入自动加载。

启用布局

通过在您的 <NuxtLayout> 中添加 app.vue 来启用布局。

app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

要使用布局

  • 在您的页面中使用 definePageMeta 设置 layout 属性。
  • 设置 <NuxtLayout>name 属性。
布局名称将规范化为 kebab-case,因此 someLayout 将变为 some-layout
如果未指定布局,将使用 layouts/default.vue
如果您在应用程序中只有一个布局,建议使用 app.vue
与其他组件不同,您的布局必须具有单个根元素,以允许 Nuxt 在布局更改之间应用过渡 - 并且此根元素不能是 <slot />

默认布局

添加一个 ~/layouts/default.vue

layouts/default.vue
<template>
  <div>
    <p>Some default layout content shared across all pages</p>
    <slot />
  </div>
</template>

在布局文件中,页面的内容将显示在 <slot /> 组件中。

命名布局

目录结构
-| layouts/
---| default.vue
---| custom.vue

然后您可以在您的页面中使用 custom 布局

pages/about.vue
<script setup lang="ts">
definePageMeta
({
layout
: 'custom'
}) </script>
了解更多关于 definePageMeta 的信息。

您可以使用 <NuxtLayout>name 属性直接覆盖所有页面的默认布局。

app.vue
<script setup lang="ts">
// You might choose this based on an API call or logged-in status
const layout = "custom";
</script>

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

如果您在嵌套目录中有一个布局,布局的名称将基于其自身的路径目录和文件名,重复的段将被删除。

文件布局名称
~/layouts/desktop/default.vuedesktop-default
~/layouts/desktop-base/base.vuedesktop-base
~/layouts/desktop/index.vuedesktop

为了清晰起见,我们建议布局的文件名与其名称一致

文件布局名称
~/layouts/desktop/DesktopDefault.vuedesktop-default
~/layouts/desktop-base/DesktopBase.vuedesktop-base
~/layouts/desktop/Desktop.vuedesktop
文档 > 示例 > 功能 > 布局 中阅读和编辑实时示例。

动态更改布局

您也可以使用 setPageLayout 助手动态更改布局

<script setup lang="ts">
function 
enableCustomLayout
() {
setPageLayout
('custom')
}
definePageMeta
({
layout
: false,
}); </script> <template> <
div
>
<
button
@
click
="
enableCustomLayout
">Update layout</
button
>
</
div
>
</template>
文档 > 示例 > 功能 > 布局 中阅读和编辑实时示例。

在每个页面基础上覆盖布局

如果您使用页面,您可以通过设置 layout: false 并使用 <NuxtLayout> 组件在页面中完全控制。

<script setup lang="ts">
definePageMeta({
  layout: false,
})
</script>

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header> Some header template content. </template>

      The rest of the page
    </NuxtLayout>
  </div>
</template>
如果您在页面中使用 <NuxtLayout>,请确保它不是根元素(或 禁用布局/页面过渡)。