加载中...

Nuxt3教程之:layouts

前言

layouts是Nuxt 提供了一个布局框架,用于将常见的 UI 模式提取为可重用的布局。本篇教程主要讲解一下layouts的一些基本概念

正文

  1. layouts 是一个约定的文件夹名称,必须叫这个名称才能起作用
  2. layouts文件夹中如果创建了 default.vue 这个文件, 则会给路由中的所有页面都套一个 default.vue
  3. 使用了default.vue,并且在 pages 目录中的vue中使用了 <NuxtLayout></NuxtLayout> 组件,相当于套了两层 layouts.vue; NuxtLayout标签默认的name是default,加了一层;default.vue会默认加一层。
  4. 如果不想被自动套layouts,可以不创建 default.vue,使用自定义名字的文件名:例如:abc.vue;在使用时都是用 <NuxtLayout name='abc'></NuxtLayout>
  5. 抛开默认layouts文件,开始使用layouts 有两种方法:使用<NuxtLayout> 标签和在 definePageMeta 方法中设置layout属性

后记

多看几遍文档,多看几遍,多看几遍
https://nuxt.com.cn/docs/guide/directory-structure/layouts

posted @ 2024-01-15 00:25  水车  阅读(266)  评论(0编辑  收藏  举报