05-Nuxt.js基本使用-页面布局

3.3 页面布局

页面布局就是页面内容的整体结构，通过在layouts目录下添加布局文件来实现。在layouts 根目录下的所有文件都
属于个性化布局文件，可以在页面组件中利用 layout 属性来引用。
一个例子：
1、定义：layouts/test.vue布局文件，如下：
注意：布局文件中一定要加 组件用于显示页面内容。

<template>
  <div>
    <div>这里是头</div>
    <nuxt/>
    <div>这里是尾</div>
  </div>
</template>
<script>
  export default {
  }
</script>
<style>
</style>

2、在pages目录创建user目录，并创建index.vue页面
在 pages/user/index.vue 页面里， 可以指定页面组件使用 test 布局，代码如下：

<template>
  <div>
    测试页面
  </div>
</template>
<script>
  export default{
    layout:'test'
  }
</script>
<style>
</style>

3、测试，请求：http://localhost:10000/user，如果如下:


如果index.vue改为以下代码：

<template>
  <div>
    测试页面
  </div>
</template>
<script>
  // export default{
  //   layout:'test'
  // }
</script>
<style>
</style>

那么默认使用default.vue布局

效果如下：