Nuxt3 佈局layouts和NuxtLayout的使用詳解

Posted on by

Nuxt3是基於Vue3的一個開發框架，基於服務器端渲染SSR，可以更加方便的用於Vue的SEO優化。

用Nuxt3 SSR模式開發出來的網站，渲染和運行速度非常快，性能也非常高，而且可SEO。

接下來我主要給大傢講解下Nuxt3的layouts佈局目錄如何使用的，以及搭配NuxtLayout怎麼使用的。

先看下我們例子的目錄：

layouts目錄一般是用於頁面的公共部分，例如共有的頭部菜單導航、底部Footer、側面導航菜單等。佈局是圍繞包含多個頁面的公共用戶界面的頁面的包裝器，例如頁眉和頁腳顯示。佈局是使用<slot />組件顯示頁面內容的Vue文件。默認情況下使用layouts/default.vue文件。自定義佈局可以設置為頁面元數據的一部分。

我們這裡以下圖這個普通頁面為例：

 紅色圈出來部分為公用部分，我們提取到layouts裡，然後在pages裡首頁（index.vue）和關於頁面（about.vue）裡進行引入。

其中NuxtLayout這個標簽就是用於公共佈局自定義和引入的功能。

首先看下入口文件app.vue裡的寫法：

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
<script setup>
onMounted(() => {
});
</script>

我們在入口文件app.vue裡用NuxtLayout包裹起來，那麼我們就可以使得整個項目頁面都公用一個NuxtLayout實例，這樣狀態、數據、NuxtLayout實例都可以共享瞭，如果不同頁面都用NuxtLayout包裹，那麼會產生多個不同的NuxtLayout實例，數據不共享，可能也會導致顯示錯誤。

接下來我們看下layouts目錄下的公用佈局文件：custom.vue

<template>
  <div class="header_container">
    <el-header>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
        background-color="#c6e2ff" @select="handleSelect">
        <el-menu-item index="0">LOGO</el-menu-item>
        <el-menu-item index="1">Processing Center</el-menu-item>
        <div class="flex-grow" />
        <el-menu-item index="2">Processing Center</el-menu-item>
        <el-sub-menu index="3">
          <template #title>Workspace</template>
          <el-menu-item index="3-1">item one</el-menu-item>
          <el-menu-item index="3-2">item two</el-menu-item>
          <el-menu-item index="3-3">item three</el-menu-item>
          <el-sub-menu index="3-4">
            <template #title>item four</template>
            <el-menu-item index="3-4-1">item one</el-menu-item>
            <el-menu-item index="3-4-2">item two</el-menu-item>
            <el-menu-item index="3-4-3">item three</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
      </el-menu>
    </el-header>
  </div>
  <slot />
  <el-footer>Footer 2</el-footer>
</template>
<script setup lang="ts">
const handleSelect = (key: string, keyPath: string[]) => {
};
const route = useRoute();
// const activeIndex = ref("1");
const activeIndex = computed(() => {
  return route.meta.index + ''
})
onMounted(() => {
});
</script>
<style>
.flex-grow {
  flex-grow: 1;
}
.header_container {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 20px;
  background-color: #c6e2ff;
}
.el-header {
  width: 1024px;
  margin: 0 auto;
}
</style>

這個頁面裡主要是定義瞭公用header佈局和footer佈局。而中間的動態替換部分，用的<slot />。也就是我們在引入custom.vue公用佈局的頁面裡，包裹的內容會自動替換<slot />部分。

接收動態從引入佈局裡傳遞過來的參數，我這裡用的route.meta。但是註意，這裡用的computed計算屬性來存儲和獲取傳遞過來的參數。如果不是用計算屬性，大傢可以測試下，頁面切換參數不會及時的獲取到，隻有手動刷新頁面才會獲取到傳遞的參數，所以這裡要用computed計算屬性來存儲和獲取傳遞過來的參數。

... ...
const route = useRoute();
// const activeIndex = ref("1");
const activeIndex = computed(() => {
  return route.meta.index + ''
})
... ...

緊接著我們看下首頁index.vue是怎麼引入公用佈局custom.vue的，又是如何傳遞參數的。

<template>
  <div class="common-layout">
    <el-container class="mainContainer">
      <el-main>
        <span>我是首頁</span>
        <div class="btn_container">
          <el-button type="primary" @click="toAbout()">Primary</el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
const router = useRouter();
//這裡的layout定義瞭NuxtLayout引入加載的公共佈局文件
//index為我們要通過route.meta傳遞給公共佈局文件的參數
definePageMeta({
  layout: 'custom',
  index: 1,
});
onMounted(() => {
});
function toAbout() {
  router.push("/about");
}
</script>
<style scoped>
.mainContainer {
  width: 1224px;
  margin: 0 auto;
}
.btn_container {
  padding: 20px;
}
</style>

頁面的template裡寫的都將會掛載替換到custom.vue裡的<slot/>裡，這樣就形成瞭外層頂部和底部都是固定的custom.vue裡的公用佈局內容，中間部分是我們index.vue的首頁內容。

... ...
definePageMeta({
  layout: 'custom',
  index: 1,
});
... ...

我們是通過definePageMeta來設置NuxtLayout使用的哪個佈局文件。要傳遞給公共佈局文件的也可以在這裡定義傳遞。

最後我們看下關於頁面about.vue是如何寫的，整體跟index.vue大同小異。

<template>
    <div class="common-layout">
        <el-container class="mainContainer">
            <el-main>我是關於頁面</el-main>
        </el-container>
    </div>
</template>
<script setup lang="ts">
useHead({
    title: '關於頁面',
    meta: [
        { name: 'description', content: 'My amazing site.' }
    ],
    bodyAttrs: {
        class: 'test'
    },
    script: [{ children: 'console.log(\'Hello world\')' }]
})
definePageMeta({
  layout:'custom',
  index: 2,
});
onMounted(() => {
});
</script>
<style scoped>
.mainContainer {
    display: block;
    width: 1224px;
    margin: 0 auto;
}
</style>

我們點擊index.vue裡的按鈕跳轉到about.vue頁面。about.vue頁面效果如下圖所示：

 隻有中間部分是動態更換的，頂部和底部都是公用的custom.vue佈局。

同時註意，這個首頁和關於頁面頂部公用菜單導航的選中項是在變化的，這是由於傳遞過來的參數index起瞭作用，已經生效。

到此這篇關於Nuxt3 佈局layouts和NuxtLayout的使用的文章就介紹到這瞭,更多相關Nuxt3 佈局layouts和NuxtLayout內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：