Nuxt.JS项目开发技巧（V2.15.7） - 默认布局与覆盖（layouts）

       哈喽，大家好！这一期为大家带来的是Nuxt中默认布局的使用以及覆盖。下面我们一起来看看吧。以下示例仅为演示所需，与实际开发无关！

       相信大家都知道layouts文件夹的作用（在新版本Nuxt模板中需要自行创建该文件夹）。当我们在default.vue中设置好全局模板后总有几个页面不需要使用，那该怎么办呢？那就是在layouts下新建一个模板文件，比如我要在登录界面新建一个模板，那就创建一个loginDefault.vue文件，文件内容与default.vue的布局一模一样，如果有内容与default.vue重复那就不要写即可。比如我在此页面下header的内容不一样，而footer的内容与default.vue一样，那我只需要改写header的代码就可以了，footer的代码依然会沿用default.vue中的footer。代码对比如下：

/* default.vue */
<template>
  <div>
    <Header></Header>
    <Nuxt />
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../components/header.vue';
import Footer from '../components/footer.vue';
export default {
  components:{
    Header,
    Footer
  }
}
</script>

/* loginDefault.vue */
<template>
  <div>
    <Header></Header>
    <Nuxt />
  </div>
</template>

<script>
import Header from '../components/loginHeader.vue';
export default {
  components:{
    Header
  }
}
</script>

       layout下还有一个很重要的文件就是404页面。这里我习惯性命名为error.vue。内容如下：

<template>
  <div>
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

<script>
  export default {
    props: ['error'],
    layout: 'error' // you can set a custom layout for the error page
  }
</script>

       本期内容到这里就结束啦，如果对你有帮助请帮我点一个免费的赞！