layouts
Nuxt 提供 layouts 框架，將常見的 UI 模式提取到可重複使用的 layouts 中。
為了獲得最佳效能，放置在此目錄中的元件將在使用時透過非同步匯入自動載入。
啟用 Layouts
透過將 <NuxtLayout> 新增至您的 app.vue 來啟用 Layouts
app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
若要使用 layout
- 使用 definePageMeta 在您的頁面中設定
layout屬性。 - 設定
<NuxtLayout>的name屬性。
layout 名稱會標準化為 kebab-case，因此
someLayout 會變成 some-layout。如果未指定 layout，則會使用
layouts/default.vue。如果您的應用程式中只有單一 layout，我們建議改用
app.vue。與其他元件不同，您的 layouts 必須具有單一根元素，以便 Nuxt 能夠在 layout 變更之間套用轉場效果 - 而且此根元素不能是
<slot />。預設 Layout
新增 ~/layouts/default.vue
layouts/default.vue
<template>
<div>
<p>Some default layout content shared across all pages</p>
<slot />
</div>
</template>
在 layout 檔案中，頁面的內容將會顯示在 <slot /> 元件中。
具名 Layout
目錄結構
-| layouts/
---| default.vue
---| custom.vue
然後您可以在您的頁面中使用 custom layout
pages/about.vue
<script setup lang="ts">
definePageMeta({
layout: 'custom'
})
</script>
您可以使用 <NuxtLayout> 的 name 屬性，直接覆寫所有頁面的預設 layout
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>
如果您在巢狀目錄中有 layout，則 layout 的名稱將根據其自身的路徑目錄和檔案名稱，並移除重複的區段。
| 檔案 | Layout 名稱 |
|---|---|
~/layouts/desktop/default.vue | desktop-default |
~/layouts/desktop-base/base.vue | desktop-base |
~/layouts/desktop/index.vue | desktop |
為了清楚起見，我們建議 layout 的檔案名稱應與其名稱相符
| 檔案 | Layout 名稱 |
|---|---|
~/layouts/desktop/DesktopDefault.vue | desktop-default |
~/layouts/desktop-base/DesktopBase.vue | desktop-base |
~/layouts/desktop/Desktop.vue | desktop |
在 文件 > 範例 > 功能 > Layouts 中閱讀和編輯即時範例。
動態變更 Layout
您也可以使用 setPageLayout 輔助程式來動態變更 layout
<script setup lang="ts">
function enableCustomLayout () {
setPageLayout('custom')
}
definePageMeta({
layout: false,
});
</script>
<template>
<div>
<button @click="enableCustomLayout">Update layout</button>
</div>
</template>
在 文件 > 範例 > 功能 > Layouts 中閱讀和編輯即時範例。
在每個頁面基礎上覆寫 Layout
如果您正在使用 pages，您可以透過設定 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>，請確保它不是根元素（或停用 layout/頁面轉場效果）。