nuxt3学习记录2-Layouts

224 阅读1分钟

default默认布局

项目目录结构

image.png

页面布局模板文件放置在 layouts/ 目录中,使用时会通过异步导入自动加载。 如果你创建了一个 layouts/default.vue 这将用于你应用中的所有页面。 通过将 layout 属性设置为组件选项的一部分来使用其他布局。

如果您的应用程序中只有一个布局,您也可以直接使用 app.vue

PS:下图是我加载默认模板示例代码

image.png

展示效果如下图所示,pages/index.vue直接显示了app.vuelayouts/default.vue的内容

image.png

自定义布局 custom

如果需要使用自定义布局,在页面中添加NuxtLayout标签,并设置layout: false

image.png

展示效果如下图:

image.png

之前碰到一些问题,看很多朋友的文档app.vue文件是不需要添加<NuxtLayout></NuxtLayout>标签的,但是我自己学习的过程中发现这样子的话,defult.vue模板不能自动加载,搞了好久没搞出来,后面经朋友指点去翻阅了一下官方的英文文档,终于解决了疑惑,所以写帖子记录一下,怕下次忘记了。文章内容也都是参考官方文档来的,纯个人记录贴,勿喷勿喷哈~~~。