4.4-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》页面布局（layouts）

《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》全文电子档将分章节陆续在“nuxt”微信订阅号原创发布，敬请关注。如果您等不及，急切提前阅读和实操，可以在订阅号中有偿获取完整电子教程和后续持续更新版本。

本教程配套示例在线预览网址：https://www.dvtop.cn

Nuxt3提供可定制的布局框架，可以在整个应用程序中使用，非常适合将通用UI或代码模式提取到可重用的布局组件中。

页面布局Vue文件必须放在项目根目录的layouts目录下，使用时自动异步导入加载。

4.4.1 默认全局布局

默认布局文件必须为~/layouts/default.vue，通过在~/app.vue中增加<NuxtLayout>组件包含到NuxtPage配置，将整个项目页面使用默认布局。

~/layouts/default.vue
<template>   <div class="app-box">     <div>此区域使用默认布局。</div>     <slot />   </div> </template>
增加<NuxtLayout>标签对	~/app.vue
<template>   <NuxtLayout>     <div class="app-box">       <NuxtPage />     </div>   </NuxtLayout> </template>

以上通过网址http://localhost:3000可正常浏览网页，默认布局已经生效。

注意：layouts下不要创建子目录，所有Vue布局文件都放在layouts根目录下。

4.4.2 自定义布局

在页面中通过<NuxtLayout name="布局名称（kebab-case）">可以指定布局，同时支持动态修改当前页面布局，支持页面禁用默认布局而使用自定义布局。当前页面的布局修改后对其他页面无效。

~/layouts/CustomFirst.vue
<template>   <div class="app-box">     <div>此区域使用第一个自定义布局。</div>     <slot />   </div> </template>
	~/pages/layout/custom.vue
<template>   <div>     <div>       <span>本页面禁用全局默认布局，在此页面内可选择布局：</span>       <span @click="tap(1)" class="app-margin-left app-cursor">默认布局</span>       <span @click="tap(2)" class="app-margin-left app-cursor">自定义布局</span>     </div>     <NuxtLayout :name="layoutName">       <div class="app-box">         <h6>页面内自定义布局和动态更改布局。</h6>         <BaseFooLink></BaseFooLink>       </div>     </NuxtLayout>   </div> </template> <script setup>   definePageMeta({     layout: false, //页面初始化时禁用默认布局     //layout: "custom-first", //页面初始化时自定义更改布局   });   //本示例通过标签的name来动态更改布局   const layoutName = ref("custom-first");   function tap(type) {     if (type == 1) layoutName.value = 'default';     else layoutName.value = "custom-first";   } </script>

以上通过网址http://localhost:3000/layout/custom可正常浏览网页。

Nuxt提供setPageLayout函数允许动态更改页面的布局。他依赖于对Nuxt上下文context的访问，只能在组件的设置函数、插件和路由中间件中调用。

~/middleware/layout.global.js

export default defineNuxtRouteMiddleware((to, from) => {   //全局中间件，指定此路由页面的布局   if( to.fullPath.indexOf("/component/dynamic")==0){     setPageLayout('custom-first');   } })

注意：布局文件名如果有大写，在使用时需要按kebab-case (短横线隔开式) 命名，CustomFirst.vue在使用时命名为custom-first。