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>
您可以使用 <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.vue | desktop-default |
~/layouts/desktop-base/base.vue | desktop-base |
~/layouts/desktop/index.vue | desktop |
為了清楚起見，我們建議版面配置的檔案名稱應與其名稱相符
| 檔案 | 版面配置名稱 |
|---|---|
~/layouts/desktop/DesktopDefault.vue | desktop-default |
~/layouts/desktop-base/DesktopBase.vue | desktop-base |
~/layouts/desktop/Desktop.vue | desktop |
在 文件 > 範例 > 功能 > 版面配置 中閱讀並編輯即時範例。
動態變更版面配置
您也可以使用 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>，請確保它不是根元素（或停用版面配置/頁面過渡）。