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