Nuxt pages 不同的页面 使用不同 的 layout/default.vue 即 nuxtjs 多布局切换

有时候pages中不同的页面我们需要不同的个性化布局此时可以使用nuxtjs 的layout属性

关于layout属性

layouts 根目录下的所有文件都属于个性化布局文件，可以在页面组件中利用 layout 属性来引用。

举个例子：

1.自定义布局文件layouts/custom_layout.vue:

<template>
    <div>
        <div>这里是custom_layout</div>
        <nuxt/>
    </div>
</template>
<script>
export default {
    
}
</script>

2.在 pages/custom.vue 里， 可以指定页面组件使用 custom_layout 布局。

<template>
    <div>
        <h2>我是自定义页面的内容</h2>
    </div>
</template>
<script>
export default {
    // 下面的两种方式都可以；layout属性其实是将这个vue页面跟布局vue进行关联的属性，layout的值为layout文件夹下所对应布局的名字
    // layout: 'custom_layout',
    layout: function(context){
        return 'custom_layout'
    }
}
</script>