05. 使用布局

比如项目中所有的页面，都需要按下面的方式布局 ：

这时候则可以用到nuxt提供的layouts功能。

使用步骤

1、在layouts文件夹下，创建布局文件。如main.vue（没有这个文件夹的则自己在根目录创建）

2、编写main.vue

<template>
  <div class="app-main">
    <div class="nav left-nav">左导航</div>
    <div class="center">
      <nuxt />
    </div>
    <div class="nav right-nav">右导航</div>
  </div>
</template>
<style scoped>
.app-main {
  display: flex;
  justify-content: space-between;
}
.center {
  width: 60%;
  background: pink;
}
.nav {
  width: 20%;
  background: #ccc;
}
</style>

注意<nuxt />这个标签，这个标签的内容代表当前正在访问的页面。（这里假设我在a.vue中使用，那么上面的<nuxt />就代表a.vue的内容）

3、在某个页面中使用该布局

<template>
  <div>内容区域</div>
</template>
<script>
export default {
  layout: "main", // 使用布局。这里写main是因为我创建的布局文件就叫main.vue
};
</script>

这里的layout也可以这样写 ：

<template>
  <div>内容区域</div>
</template>
<script>
export default {
  layout(content) { // 这种写法可以获取上下文对象content
    console.log(content);
    return "main";
  },
};
</script>

4、如果你的布局文件是在layouts下面的子目录里面，则使用的时候需要这样写 ：

<template>
  <div>内容区域</div>
</template>
<script>
export default {
  layout: "mylayouts/main", // 使用文件夹下的布局文件
};
</script>