目錄
layout是甚麼
Nuxt的layout，顧名思義就是用於處理每個頁面都會出現的組件，這可以讓你不必每頁都重複引入組件
使用方法是創建layouts資料夾，然後在裡面放入vue檔作為layout
使用方式
預設layout
除非有特別設定，不然default.vue會是所有頁面的預設的layout
製作layout時，不用在script內引入組件
<!-- layouts/default.vue -->
<template>
<div>
<Header></Header>
<!-- 記得一訂要放Nuxt，如果沒有的話，內容組件不會被放進來 -->
<Nuxt></Nuxt>
<Footer></Footer>
</div>
</template>
自訂layout
只要在layout資料夾內(第1層)放入vue檔，就可以生成另一個layout
使用時只要在需要該layout的頁面中設定layout屬性即可
<script>
export default {
layout: 'document',
}
</script>
進階使用
假設專案的結構這樣
├─pages
│ └─document
│ ├─ index.vue
│ └─ getStarted.vue
├─ index.vue
└─ document.vue
我想要全部的路徑都有Header和Footer，但只有doument底下的頁面要SideBar呢🤔
你可能會想說直接在document.vue裡面再次放入Header跟Footer就好
<!-- layouts/document.vue -->
<template>
<div>
<Header></Header>
<div class="flex">
<SideBar></SideBar>
<Nuxt></Nuxt>
</div>
<Footer></Footer>
</div>
雖然確實有用啦，但這個做法不太好
那能夠在layout裡放另一個layout，或者同個頁面放2個layout嗎🤔
當然不行
事實上layout追根究底還是個組件，因此可以把layout當作組件引入另一個layout，以此生成新的layout
首先小改一下default layout
<template>
<div>
<Header></Header>
<div :class="className">
<Nuxt></Nuxt>
<!-- 在這邊放slot是為了document底下的頁面放SideBar -->
<slot />
</div>
<Footer></Footer>
</div>
</template>
把default.vue引入document.vue，並插入SideBar
<!-- layouts/document.vue -->
<template>
<Default className="flex flex-row-reverse">
<template>
<SideBar></SideBar>
</template>
</Default>
</template>
<script lang="ts">
import Vue from 'vue';
import Default from './default.vue';
export default Vue.extend({
name: 'Document',
components: {
Default,
}
})
</script>
