vue-ssr之nuxt.js的layout布局

在前端开发中，我们通常需要把公用部分抽离出来，单独作为一个layout文件，用来引入公共文件，这样我们就不需要在每一个页面都去引入公共文件了。那么我们在nuxt.js中如何实现一个公用模板抽离呢？

首先，nuxt.js为我们提供了默认的layout, 即项目文件下面的layouts/default.vue;所有的布局文件，都需要放在这里，并且该目录名为Nuxt.js保留的，不可更改。

默认布局

对layouts/default.vue进行改造后，整个项目都可以使用这个布局了。

<template>
  <div>
    <el-container>
      <v-header></v-header>
      <el-main>
        <nuxt/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import vHeader from '@/components/header'
export default {
  components: {
    vHeader
  }
};
</script>

自定义布局

有的使用因为业务需求的不同，我们可能会遇到，一个默认的布局文件无法满足的情况，这个时候我们就可以使用自定义布局了，在layouts/下新建blog.vue文件，用来做博客的公用布局。

blog.vue文件

<template>
  <div>
    <h1>我是博客布局文件</h1>
    <nuxt/>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

然后在项目使用的使用理由nuxt.js为我们提供的layout参数配置即可

<template>
    <div>
        这是博客布局的测试页面
    </div>
</template>

<script>
export default {
    layout: 'blog'
}
</script>

<style>

</style>

本文参考

https://zh.nuxtjs.org/guide/views