vue-ssr之nuxt.js的layout布局

[yujinghan]

在前端开发中，我们通常需要把公用部分抽离出来，单独作为一个layout文件，用来引入公共文件，这样我们就不需要在每一个页面都去引入公共文件了。nuxt.js为我们提供了默认的layout, 即项目文件下面的layouts/default.vue;所有的布局文件，都需要放在这里，并且该目录名为Nuxt.js保留的，不可更改。

默认布局
可通过添加 layouts/default.vue 文件来扩展应用的默认布局。
提示: 别忘了在布局文件中添加 组件用于显示页面的主体内容。

默认布局的源码如下：

<template>
  <nuxt />
</template>

自定义布局
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>