Nuxt3?布局layouts和NuxtLayout的使用詳解

更新時間：2023年04月27日 15:41:41 作者：范特西

layouts是Nuxt3提供的一種方便開發(fā)者快速實(shí)現(xiàn)自定義布局的約定，是基于Vue3的一個開發(fā)框架，基于服務(wù)器端渲染SSR，可以更加方便的用于Vue的SEO優(yōu)化，這篇文章主要介紹了Nuxt3?布局layouts和NuxtLayout的使用,需要的朋友可以參考下

Nuxt3是基于Vue3的一個開發(fā)框架，基于服務(wù)器端渲染SSR，可以更加方便的用于Vue的SEO優(yōu)化。

用Nuxt3 SSR模式開發(fā)出來的網(wǎng)站，渲染和運(yùn)行速度非?？欤阅芤卜浅８?，而且可SEO。

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

先看下我們例子的目錄：

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

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

紅色圈出來部分為公用部分，我們提取到layouts里，然后在pages里首頁（index.vue）和關(guān)于頁面（about.vue）里進(jìn)行引入。

其中NuxtLayout這個標(biāo)簽就是用于公共布局自定義和引入的功能。

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

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

我們在入口文件app.vue里用NuxtLayout包裹起來，那么我們就可以使得整個項(xiàng)目頁面都公用一個NuxtLayout實(shí)例，這樣狀態(tài)、數(shù)據(jù)、NuxtLayout實(shí)例都可以共享了，如果不同頁面都用NuxtLayout包裹，那么會產(chǎn)生多個不同的NuxtLayout實(shí)例，數(shù)據(jù)不共享，可能也會導(dǎo)致顯示錯誤。

接下來我們看下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布局。而中間的動態(tài)替換部分，用的<slot />。也就是我們在引入custom.vue公用布局的頁面里，包裹的內(nèi)容會自動替換<slot />部分。

接收動態(tài)從引入布局里傳遞過來的參數(shù)，我這里用的route.meta。但是注意，這里用的computed計(jì)算屬性來存儲和獲取傳遞過來的參數(shù)。如果不是用計(jì)算屬性，大家可以測試下，頁面切換參數(shù)不會及時的獲取到，只有手動刷新頁面才會獲取到傳遞的參數(shù)，所以這里要用computed計(jì)算屬性來存儲和獲取傳遞過來的參數(shù)。

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

緊接著我們看下首頁index.vue是怎么引入公用布局custom.vue的，又是如何傳遞參數(shù)的。

<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傳遞給公共布局文件的參數(shù)
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里的公用布局內(nèi)容，中間部分是我們index.vue的首頁內(nèi)容。

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

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

最后我們看下關(guān)于頁面about.vue是如何寫的，整體跟index.vue大同小異。

<template>
    <div class="common-layout">
        <el-container class="mainContainer">
            <el-main>我是關(guān)于頁面</el-main>
        </el-container>
    </div>
</template>
<script setup lang="ts">
useHead({
    title: '關(guān)于頁面',
    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>

我們點(diǎn)擊index.vue里的按鈕跳轉(zhuǎn)到about.vue頁面。about.vue頁面效果如下圖所示：