有時候我們pages中不同的頁面需要不同的個性化佈局這時候layout就起作用了

layouts 根目錄下的所有檔案都屬於個性化佈局檔案，可以在頁面元件中利用 layout 屬性來引用。

請確保在佈局檔案裡面增加 <nuxt/> 元件用於顯示頁面非佈局內容。

舉個例子

1.layouts/custom_layout.vue:

<template>
    <div>
        <div class="title">這裡是自定義也頁面的頭部(佈局)</div>
        <!-- nuxt可以理解為所對應的.vue頁面的內容 -->
        <nuxt/>
        <div class="footer">這裡是自定義頁面的底部(佈局)</div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
.title,.footer{
    padding: 20px;
}
.title{
    background: pink;
}
.footer{
    background: yellow
}
</style>


 

2.在 pages/custom.vue 裡， 可以指定頁面元件使用 blog 佈局。

<template>
    <div>
        <h2>我是自定義頁面的內容</h2>
    </div>
</template>
<script>
export default {
    // 下面的兩種方式都可以；layout屬性其實是將這個vue頁面跟佈局vue進行關聯的屬性，layout的值為layout資料夾下所對應佈局的名字
    // layout: 'custom_layout',
    layout: function(context){
        return 'custom_layout'
    }
}
</script>
<style scoped>

</style>


 

效果：