nuxt页面默认布局文件在layouts目录下default.vue,可将页面的头部和脚部提取出来,形成布局页,将主内容区域的内容替换成<nuxt />。附default.vue代码:
html
<template>
<div class="app-container">
<div id="main">
<!-- 公共头 -->
<myheader/>
<div class="main-container">
<el-scrollbar class='page-component__scroll'>
<!-- 内容区域 -->
<nuxt/>
</el-scrollbar>
</div>
<!-- 公共底 -->
<myfooter/>
</div>
</div>
</template>
<script>
import '~/assets/css/app.css'
import '~/assets/css/chunk.css'
import '~/assets/css/iconfont.css'
import '~/assets/css/main.css'
export default {
}
</script>
分别在default.vue同级的layouts目录下创建头文件myheader.vue和myfooter.vue,
最后在default.vue的<script>中引入myheader.vue和myfooter.vue
html
import myheader from './myheader'
import myfooter from './myfooter'
export default {
components: {
myheader,myfooter
}
}