default默认布局
项目目录结构
页面布局模板文件放置在
layouts/目录中,使用时会通过异步导入自动加载。 如果你创建了一个layouts/default.vue这将用于你应用中的所有页面。 通过将layout属性设置为组件选项的一部分来使用其他布局。如果您的应用程序中只有一个布局,您也可以直接使用 app.vue
PS:下图是我加载默认模板示例代码
展示效果如下图所示,pages/index.vue直接显示了app.vue和layouts/default.vue的内容
自定义布局 custom
如果需要使用自定义布局,在页面中添加NuxtLayout标签,并设置layout: false
展示效果如下图:
之前碰到一些问题,看很多朋友的文档
app.vue文件是不需要添加<NuxtLayout></NuxtLayout>标签的,但是我自己学习的过程中发现这样子的话,defult.vue模板不能自动加载,搞了好久没搞出来,后面经朋友指点去翻阅了一下官方的英文文档,终于解决了疑惑,所以写帖子记录一下,怕下次忘记了。文章内容也都是参考官方文档来的,纯个人记录贴,勿喷勿喷哈~~~。