Nuxt - 自定义页面布局，＜Nuxt /＞ 个性化多套模板（一个项目内既要有用户正常浏览的普通页面，又要存在后台管理系统布局的页面）
前言
使用 Nuxt.js 开发项目时，遇到了带 “后台管理” 的功能，即一个正常供用户浏览的页面，点击控制台或个人中心进入后台管理界面，里面为菜单和主体内容的左右布局，点击菜单跳转路由，右侧主体内容随之更新，具体如下图所示。
本文将给您从 0-1 提供解决方案，您只需要按照步骤进行即可实现。
像 Vue.js 纯后台管理系统，咱们可以通过 layout 提前做好后台管理的布局，通过 <router-view/> 实现，
但是来到了 Nuxt.js 项目中，有些朋友就懵了，
既要给到用户正常的布局页面，又要给到后台管理的布局页面，感觉根本无法下手。
该问题的解决方案，其实就是自定义两套模板，用户正常浏览的页面使用一套，后台管理使用另一套。
第一步
该默认模板，就是给 用户正常浏览的页面 使用的。
在项目根目录新建 layouts 文件夹，
然后在里面建立一个 default.vue 文件，写入下代码：
<template>
<Nuxt />
</template>
第二步
该模板，就是给 后台管理界面 使用的。
在刚才建立的 layouts 文件夹内，继续新建 admin.vue 文件，写入以下代码：
<!-- 这块跟正常的vue页面一样,能引组件,能写函数,能写样式等等 -->
<!-- 所以说有什么需求直接在这里做就行了 -->
<!-- <Nuxt /> 就相当于vue里面的 <router-view>,页面是啥里面就是啥 -->
<template>
<section>
<!-- 左侧内容 -->
<div>
左侧菜单
</div>
<!-- END -->
<!-- 右侧内容 -->
<div>
<Nuxt />
</div>
<!-- END -->
</section>
</template>
<script>
// 建议通过组件的形式,完成左右的菜单和内容
export default {
components: {},
data() {
return {}
}
}
</script>
<style scoped>
/* 自己写一下左右布局的css代码 */
</style>
第三步
2 套模板建立好了，您最后引用即可。
您需要新建一个后台管理页面，参考以下代码：
<template>
<div>
<h1>后台管理系统 - 主页</h1>
</div>
</template>
<script>
export default {
// 【重点】通过该配置指定模板,用咱们建立好的即可
// 配置好后，就会按照咱们的后台管理模板渲染页面
layout: 'admin',
data() {
return {
}
},
}
</script>
<style scoped>
</style>
最终，就是这样的对应关系，<Nuxt /> 就是您的页面。
写在后面
以后每建立一个 后台管理相关 的页面，注意必须加入 layout: 'admin'，来指定使用该模板。
可能对您有帮助：https://blog.csdn.net/minihuabei/article/details/117822288
SEO
Nuxt - 自定义页面布局，Nuxt / 个性化多套模板（一个项目内既要有用户正常浏览的普通页面，又要存在后台管理系统布局的页面）nuxt.js 自定义layouts后台管理系统左右侧布局模板项目中有后台管理，router-view 和 Nuxt /视图怎么实现多套模板选择性使用怎么做后台管理系统页面类似vue.js的router-view 自定义布局特性项目内含有普通页面与后台管理页面怎么办页面整体结构解决