分享：nuxt自定义布局

layouts 目录中的每个文件 (顶级) 都将创建一个可通过页面组件中的 layout 属性访问的自定义布局。
假设我们要创建一个博客布局 并将其保存到layouts/blog.vue:

<template>
  <div>
    <div>我的博客导航栏在这里</div>
    <nuxt/>
  </div>
</template>

然后我们必须告诉页面 (即pages/posts.vue) 使用您的自定义布局：

<template>
<!-- Your template -->
</template>
<script>
export default {
  layout: 'blog'
  // page component definitions
}
</script>

更多有关 layout 属性信息: API 页面 布局
点击查看 演示视频 了解自定义布局的实际效果。

链接1：https://zh.nuxtjs.org/api/pages-layout
链接2：https://www.youtube.com/watch?v=YOKnSTp7d38