Nuxt(2) - layout


Posted by TempuraEngineer on 2022-09-24

目錄

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>

最後結果就會像這樣


參考資料

Nuxt Layouts
Add two layouts in page


#Nuxt #layout







Related Posts

W8_實作練習 + 作業檢討

W8_實作練習 + 作業檢討

python源起

python源起

建立屬於你的 Google Map 地圖標記(三) - 地址輸入與座標取得

建立屬於你的 Google Map 地圖標記(三) - 地址輸入與座標取得


Comments