Nuxt layout

在Nuxtjs中，有一种机制，就是提前布局好页面结构，然后放入nuxt组件，另外的页面如果想要用这种布局，只需要layout:组件名。布局的组件放到layouts下面。我觉得这种机制就好像是Vue中的插槽。如果layouts

下面有defalut.vue,当页面没有采用任何布局方式的时候，会默认去寻找这个。所以当采用layouts的时候，谨慎使用defalut进行命名。举个例子：

layouts/blog.vue

<template>
<div>
    <header>头部</header>
    <nuxt/>

</div>
</template>
<script>
export default {

}
</script>
<style lang='scss' scoped>
header{
    height: 200px;
    line-height: 200px;
    text-align: center;
    color: rebeccapurple;
    
}
</style>

pages/lay.vue

<template>
<div>我是lay组件</div>
</template>
<script>
export default{
    layout:'blog',
}
</script>
<style lang='scss' scoped>
</style>

如果你不添加布局属性到你的页面，例如 layout: 'blog' ，则将使用 default.vue 布局。