Nuxt pages下不同的頁面對應layout下的頁面佈局
阿新 • • 發佈:2018-12-10
有時候我們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>
效果: