Nuxt pages下不同的頁面對(duì)應(yīng)layout下的頁面布局操作
有時(shí)候我們pages中不同的頁面需要不同的個(gè)性化布局這時(shí)候layout就起作用了
layouts 根目錄下的所有文件都屬于個(gè)性化布局文件，可以在頁面組件中利用 layout 屬性來引用。
pages文件下組件的layout屬性值為layout文件下的所對(duì)應(yīng)的布局組件的名稱
請(qǐng)確保在布局文件里面增加 <nuxt/> 組件用于顯示頁面非布局內(nèi)容。
舉個(gè)例子
1.layouts/custom_layout.vue:
<template>
<div>
<div class="title">這里是自定義也頁面的頭部(布局)</div>
<!-- nuxt可以理解為所對(duì)應(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屬性其實(shí)是將這個(gè)vue頁面跟布局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è)頁面把全部css樣式都加載進(jìn)來的Bug解決辦法
逐一排查是安裝包出了問題,npm i 和cnpm i不能通用;
解決辦法：
node_modules文件刪除,重新安裝.如果沒安裝鏡像就用npm i;
安裝了鏡像就用cnpm i ;
如果還不能解決，怕是nuxt包你用了last自動(dòng)安裝最新版本的，這個(gè)千萬別用last，一定要穩(wěn)定版哈，包之間有關(guān)聯(lián)的，不要隨意升級(jí)！
以上這篇Nuxt pages下不同的頁面對(duì)應(yīng)layout下的頁面布局操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了在Vue2中注冊(cè)全局組件的兩種方法,非常的細(xì)致,需要的朋友可以參考下2022-07-07
詳解Vue路由鉤子及應(yīng)用場(chǎng)景（小結(jié)）
本篇文章主要介紹了詳解Vue路由鉤子及應(yīng)用場(chǎng)景（小結(jié)），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了如何在vue 中使用柱狀圖 并自修改配置，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
vue內(nèi)置組件transition簡(jiǎn)單原理圖文詳解(小結(jié))
這篇文章主要介紹了vue內(nèi)置組件transition簡(jiǎn)單原理圖文詳解(小結(jié)),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
vue中前進(jìn)刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置的實(shí)例講解
今天小編就為大家分享一篇vue中前進(jìn)刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vite/Vuecli配置proxy代理解決跨域問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
Vue 實(shí)現(xiàn)分頁與輸入框關(guān)鍵字篩選功能
這篇文章主要介紹了Vue 實(shí)現(xiàn)分頁+輸入框關(guān)鍵字篩選功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
Vue PC端實(shí)現(xiàn)掃碼登錄功能示例代碼
目前大多數(shù)PC端應(yīng)用都有配套的移動(dòng)端APP，如微信，淘寶等，通過使用手機(jī)APP上的掃一掃功能去掃頁面二維碼圖片進(jìn)行登錄，使得用戶登錄操作更方便，安全，快捷，這篇文章主要介紹了Vue PC端如何實(shí)現(xiàn)掃碼登錄功能,需要的朋友可以參考下2023-01-01
Vue實(shí)現(xiàn)添加數(shù)據(jù)到二維數(shù)組并顯示
這篇文章主要介紹了Vue實(shí)現(xiàn)添加數(shù)據(jù)到二維數(shù)組并顯示方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在Vue中嵌入第三方頁面可以采用多種方法,例如使用<iframe>、Vue插件、動(dòng)態(tài)加載第三方腳本或WebComponents,不同方法適用于不同類型的內(nèi)容和項(xiàng)目需求,如<iframe>適用于整個(gè)網(wǎng)頁,而動(dòng)態(tài)腳本和WebComponents適合特定功能,選擇合適的方法可以有效整合外部資源2024-09-09