入门篇四：Nuxt4布局系统：让页面框架复用变得简单

目录一、默认布局二、自定义布局三、动态切换布局四、布局嵌套五、布局中传递数据六、命名插槽总结做网站时你是不是经常遇到这种情况首页、列表页、详情页都有相同的头部导航和底部版权信息。最笨的办法是每个页面都复制一遍但改起来就痛苦了——改一个 footer 要改十个文件。Nuxt 的布局系统就是来解决这个问题的。一、默认布局布局文件放在layouts目录。创建一个默认布局mkdir layouts创建layouts/default.vuetemplate div classlayout header classheader nav NuxtLink to/首页/NuxtLink NuxtLink to/about关于/NuxtLink NuxtLink to/contact联系/NuxtLink /nav /header main classmain slot / /main footer classfooter p© 2024 我的网站. All rights reserved./p /footer /div /template style scoped .layout { min-height: 100vh; display: flex; flex-direction: column; } .header { background: #fff; border-bottom: 1px solid #eee; padding: 1rem; } .header nav a { margin-right: 1rem; color: #333; text-decoration: none; } .header nav a:hover { color: #00dc82; } .main { flex: 1; padding: 2rem; } .footer { background: #f5f5f5; padding: 1rem; text-align: center; color: #666; } /style然后页面中使用NuxtLayout包裹内容。但其实Nuxt 已经自动帮你做了这件事你只需要写页面内容pages/index.vuetemplate div h1首页/h1 p欢迎来到我的网站/p /div /template页面会自动应用layouts/default.vue布局头部导航和底部版权自动出现。二、自定义布局有时候不同页面需要不同的布局。比如管理后台没有头部导航而是左侧菜单栏。创建layouts/admin.vuetemplate div classadmin-layout aside classsidebar h3管理后台/h3 nav NuxtLink to/admin/users用户管理/NuxtLink NuxtLink to/admin/articles文章管理/NuxtLink NuxtLink to/admin/settings系统设置/NuxtLink /nav /aside main classcontent slot / /main /div /template style scoped .admin-layout { display: flex; min-height: 100vh; } .sidebar { width: 200px; background: #2c3e50; color: white; padding: 1rem; } .sidebar h3 { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #3c5060; } .sidebar nav a { display: block; padding: 0.5rem; color: #b8c7ce; text-decoration: none; } .sidebar nav a:hover { background: #3c5060; color: white; } .content { flex: 1; padding: 2rem; } /style在页面中指定使用这个布局pages/admin/index.vuescript setup langts definePageMeta({ layout: admin // 指定使用 admin 布局 }) /script template div h1管理后台首页/h1 p欢迎回来管理员/p /div /templatedefinePageMeta是 Nuxt 提供的编译时宏用于定义页面元信息包括布局、中间件等。三、动态切换布局有时候同一个页面在不同状态下需要不同布局。比如用户登录前后script setup langts const { loggedIn } useUserSession() // 根据登录状态动态选择布局 definePageMeta({ layout: computed(() loggedIn.value ? default : guest) }) /script或者用setPageLayout函数动态切换script setup langts const isDark ref(false) // 切换布局 const toggleLayout () { isDark.value !isDark.value setPageLayout(isDark.value ? dark : default) } /script四、布局嵌套复杂的系统可能需要布局嵌套。比如一个两栏布局左侧固定右侧是内容区而内容区又需要默认布局的头部和底部。创建layouts/two-column.vuetemplate div classtwo-column aside classleft-panel slot namesidebar / /aside div classright-panel slot namecontent / /div /div /template在layouts/default.vue中使用template div classlayout header.../header main NuxtLayout nametwo-column template #sidebar 侧边栏内容 /template template #content slot / !-- 页面内容 -- /template /NuxtLayout /main footer.../footer /div /template五、布局中传递数据布局和页面之间可以通过 props 传递数据。在布局中定义 props!-- layouts/default.vue -- script setup langts const props defineProps{ title?: string }() /script template div classlayout header h1{{ title || 我的网站 }}/h1 /header main slot / /main /div /template页面中通过definePageMeta传递script setup langts definePageMeta({ layout: default, layoutProps: { title: 用户中心 } }) /script六、命名插槽布局支持命名插槽让页面可以往不同区域填充内容!-- layouts/default.vue -- template div header slot nameheader nav默认导航/nav /slot /header main slot / /main footer slot namefooter p默认底部/p /slot /footer /div /template页面中template NuxtLayout template #header nav自定义导航/nav /template div页面内容/div template #footer p自定义底部/p /template /NuxtLayout /template总结今天学习了 Nuxt 布局系统功能实现方式默认布局layouts/default.vue自动应用自定义布局definePageMeta({ layout: xxx })动态切换setPageLayout()或 computed布局嵌套在布局中使用NuxtLayout传递数据layoutProps配置布局系统让你的页面框架统一管理改一处全局生效。对于企业级项目来说这是必不可少的利器。下一篇文章我们聊聊页面过渡动画让页面切换更丝滑。相关文章入门篇三Nuxt4组件自动导入写代码少敲一半字入门篇二Nuxt 4路由自动生成告别手动配置路由的日子延伸阅读nuxt4完整系列持续更新中。。内容有帮助点赞、收藏、关注三连评论区等你