Nuxt pages下不同的頁面對應(yīng)layout下的頁面布局操作
更新時間：2020年11月05日 10:52:46 作者：muzidigbig
這篇文章主要介紹了Nuxt pages下不同的頁面對應(yīng)layout下的頁面布局操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
有時候我們pages中不同的頁面需要不同的個性化布局這時候layout就起作用了
layouts 根目錄下的所有文件都屬于個性化布局文件，可以在頁面組件中利用 layout 屬性來引用。
pages文件下組件的layout屬性值為layout文件下的所對應(yīng)的布局組件的名稱
請確保在布局文件里面增加 <nuxt/> 組件用于顯示頁面非布局內(nèi)容。
舉個例子
1.layouts/custom_layout.vue:
<template>
<div>
<div class="title">這里是自定義也頁面的頭部(布局)</div>
<!-- nuxt可以理解為所對應(yīng)的.vue頁面的內(nèi)容 -->
<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>我是自定義頁面的內(nèi)容</h2>
</div>
</template>
<script>
export default {
// 下面的兩種方式都可以；layout屬性其實是將這個vue頁面跟布局vue進行關(guān)聯(lián)的屬性，layout的值為layout文件夾下所對應(yīng)布局的名字
// layout: 'custom_layout',
layout: function(context){
return 'custom_layout'
}
}
</script>
<style scoped>
</style>
效果：
補充知識：Nuxt.js之一個頁面把全部css樣式都加載進來的Bug解決辦法
逐一排查是安裝包出了問題,npm i 和cnpm i不能通用;
解決辦法：
node_modules文件刪除,重新安裝.如果沒安裝鏡像就用npm i;
安裝了鏡像就用cnpm i ;
如果還不能解決，怕是nuxt包你用了last自動安裝最新版本的，這個千萬別用last，一定要穩(wěn)定版哈，包之間有關(guān)聯(lián)的，不要隨意升級！
以上這篇Nuxt pages下不同的頁面對應(yīng)layout下的頁面布局操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇VUE解決 v-html不能觸發(fā)點擊事件的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了深度解析?Vue3?的響應(yīng)式機制，今天就帶大家深入了解一下 Vue 3 的響應(yīng)式機制，相信學(xué)完今天的內(nèi)容，會對響應(yīng)式機制有更深地體會；文章會結(jié)合代碼示例，幫大家掌握響應(yīng)式機制的進階用法，讓我們正式開始學(xué)習(xí)吧2022-09-09
Vue2.0設(shè)置全局樣式(less/sass和css)
這篇文章主要為大家詳細介紹了Vue2.0設(shè)置全局樣式(less/sass和css)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這些年寫前端vue時經(jīng)常碰到虛擬DOM這個單詞，但都是聽到就算了，左耳進右耳出，知道有這么個東西就完了，因為感覺也沒有影響我實現(xiàn)公司的產(chǎn)品業(yè)務(wù)邏輯。今天在這里想花點時間探討下虛擬DOM相關(guān)的知識，給自己補補課2022-10-10
vue內(nèi)置組件keep-alive事件動態(tài)緩存實例
這篇文章主要介紹了vue內(nèi)置組件keep-alive事件動態(tài)緩存實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue組件庫的在線主題編輯器的實現(xiàn)思路，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
在vue項目中,輸入框只允許輸入數(shù)字,現(xiàn)將自己使用的一種方法記錄,本文結(jié)合實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2023-11-11
這篇文章主要為大家詳細介紹了如何利用Vue實現(xiàn)多點涂鴉效果，文中的示例代碼講解詳細，具有一定的學(xué)習(xí)價值，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
這篇文章主要介紹了Vue組件公用方法提取mixin實現(xiàn)，多個組件共用一個方法時可以用?mixin?抽取到一個js文件中，作為共用方法，下面一起進入文章了解更多詳細內(nèi)容吧2022-03-03
今天小編就為大家分享一篇vue利用v-for嵌套輸出多層對象,分別輸出到個表的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09