【layout组件 与 路由镶嵌】vue3 后台管理系统
前言
很多同学在第一次搭建后台管理系统时,会遇到一个问题,layout组件该放哪里?如何使用?路由又该如何设计?
这边会讲一下我的思考过程和最后的结果,大家可以参考一下,希望大家看完能有所收获。
文章目录
- 前言
- 一、为什么需要layout组件?
- 1. Container 布局容器
- 2. Header 顶栏容器
- 1) 页头组件`<el-page-header>`
- 2)自己写的组件
- 3)`<el-aside>`侧边栏容器
- 4) `<el-main>`主要区域容器。
- 5)`<el-footer>`底栏容器。
- 二、怎么写一个layout组件?
- 三、怎么使用layout组件呢?
- 1. 先在路由配置里定义基础路由,同时设置children路由。
- 2.动态 Layout 组件(基于路由元信息)
- 1)路由配置:在路由中添加meta.layout字段指定布局组件。
- 2)创建 Layout 组件:准备多个 Layout 组件(如AdminLayout.vue、AuthLayout.vue)。
- 3)动态渲染 Layout:在根组件中根据当前路由的meta.layout动态加载布局。
- 3.组合式 API + 插件方式
- 1)创建 Layout 插件:注册全局组件并处理布局逻辑。
- 2)定义 Layout 组件:使用插槽机制实现灵活布局。
- 3)在路由中使用:通过插件提供的组件包裹视图
- 4. 更多&总结
一、为什么需要layout组件?
1. Container 布局容器
我用的是
element-plus
的组件,所以这里以这个ui库作为例子讲哦。
这里先引入一个组件,<contaienr>
用于布局的容器组件,方便快速搭建页面的基本结构。
<el-container>
:外层容器。 当子元素中包含<el-header>
或<el-footer>
时,全部子元素会垂直上下排列, 否则会水平左右排列。
常见且实用的布局呢,大概是一下这几个:
2. Header 顶栏容器
<el-header>
:顶栏容器。一般会单独写个组件,组件内部大概是以下这些部分:
1) 页头组件<el-page-header>
在组件中可以展示很多区块,大家可以自行去了解哈。如果不清楚自己要怎么设计,就直接用这个组件就好啦!在这个组件里放东西就ok~(这是链接)。
2)自己写的组件
- 控制侧边栏收缩和展开的icon,可以用
<el-icon><Fold /></el-icon>
,记得添加相对应的事件。 - 面包屑组件,用来展示当前
<Main>
中正在展示的路由路径。可以用
el-breadcrumb
组件
3)<el-aside>
侧边栏容器
可以使用<el-menu>
菜单组件,这边一般是通过循环 menu数组(大型项目都会涉及到权限配置,里面就会有一个菜单栏配置,这边就是动态加载的啦)。有同学不会我再放代码吧。
4) <el-main>
主要区域容器。
上面说啦~展示我们的路由们
5)<el-footer>
底栏容器。
一般写个备案的时间呀、公司邮箱呀、公司信息呀什么的。聪明的你!灵活使用吧!
二、怎么写一个layout组件?
好啦,几个要素都了解了,接下来需要我们的脑子和手配合。将它们组成一个完整的layout组件。我分享一下简单的layout组件在项目中的结构长啥样哈,如图:
这里放一下index.vue的代码
<template>
<div class="common-layout"><el-container><el-aside><MyAside /></el-aside><el-container><el-header class="header"><MyHeader /></el-header><el-main><!-- 这里是会被缓存的视图组件 --><router-view v-slot="{ Component }"><keep-alive><component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" /></keep-alive><component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" /></router-view></el-main></el-container></el-container>
</div>
</template>
三、怎么使用layout组件呢?
这里有点小可爱不知道咋用@,请转到我的另一篇文章:
【vite好用的配置】自动导入组件、vue中的hook、路径解析、打包配置、本地运行反向代理配置
1. 先在路由配置里定义基础路由,同时设置children路由。
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [{path: '/',name: 'Layout',component: () => import('@/layout/index.vue'),children: [{path: '',name: 'Dashboard',component: () => import('@/views/Dashboard.vue')},{path: '/users',name: 'Users',component: () => import('@/views/Users.vue')}]},{path: '/login',name: 'Login',component: () => import('@/views/Login.vue')}
]const router = createRouter({history: createWebHistory(),routes
})export default router
2.动态 Layout 组件(基于路由元信息)
通过路由配置中的meta字段指定使用的 Layout 组件,实现更灵活的布局切换。实现步骤:
1)路由配置:在路由中添加meta.layout字段指定布局组件。
// router/index.js
const routes = [{path: '/',name: 'Dashboard',component: () => import('@/views/Dashboard.vue'),meta: { layout: 'AdminLayout' }},{path: '/login',name: 'Login',component: () => import('@/views/Login.vue'),meta: { layout: 'AuthLayout' }}
]
2)创建 Layout 组件:准备多个 Layout 组件(如AdminLayout.vue、AuthLayout.vue)。
3)动态渲染 Layout:在根组件中根据当前路由的meta.layout动态加载布局。
<!-- App.vue -->
<template><component :is="currentLayout"><router-view /></component>
</template><script>
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'export default {setup() {const router = useRouter()const layouts = {AdminLayout: () => import('@/layouts/AdminLayout.vue'),AuthLayout: () => import('@/layouts/AuthLayout.vue'),DefaultLayout: () => import('@/layouts/DefaultLayout.vue')}const currentLayout = computed(() => {const layout = router.currentRoute.value.meta.layout || 'DefaultLayout'return layouts[layout]})return {currentLayout}}
}
</script>
优点:
更灵活的布局切换,同一层级路由可使用不同 Layout。
避免深层嵌套路由,路由配置更简洁。
缺点:
需要在每个路由中手动指定 layout,维护成本较高。
3.组合式 API + 插件方式
通过创建自定义插件,将 Layout 逻辑封装,减少重复代码。实现步骤:
1)创建 Layout 插件:注册全局组件并处理布局逻辑。
// plugins/layout.js
import AdminLayout from '@/layouts/AdminLayout.vue'
import AuthLayout from '@/layouts/AuthLayout.vue'export default {install(app) {app.component('AdminLayout', AdminLayout)app.component('AuthLayout', AuthLayout)}
}
2)定义 Layout 组件:使用插槽机制实现灵活布局。
3)在路由中使用:通过插件提供的组件包裹视图
<!-- 路由组件示例 -->
<template><AdminLayout><template #header><h1>Custom Header</h1></template><template #content><router-view /></template><template #footer><p>Custom Footer</p></template></AdminLayout>
</template>
优点:
高度可定制,通过插槽传递内容更灵活。
布局逻辑集中管理,便于维护。
缺点:
需要额外的插件配置,适合大型项目。
4. 更多&总结
当然还有其他办法啦,这里就差不多列举出来,不仔细说了哈,感兴趣的同学,可以自己去研究一下。
- 基础嵌套路由:适合中小型项目,布局结构固定。
- 动态 Layout:适合需要灵活切换布局的场景。
- 插件方式:适合大型项目,需要统一管理布局逻辑。
- 权限布局:适合需要根据用户角色展示不同布局的系统。
- 多层嵌套 Layout:适合超复杂系统(如 IDE、设计工具等)。
相关文章:
【layout组件 与 路由镶嵌】vue3 后台管理系统
前言 很多同学在第一次搭建后台管理系统时,会遇到一个问题,layout组件该放哪里?如何使用?路由又该如何设计? 这边会讲一下我的思考过程和最后的结果,大家可以参考一下,希望大家看完能有所收获。…...
【PXIE301-211】基于PXIE总线的16路并行LVDS数据采集、1路光纤数据收发处理平台
板卡概述 PXIE301-211是一款基于PXIE总线架构的16路并行LVDS数据采集、1路光纤收发处理平台,该板卡采用Xilinx的高性能Kintex 7系列FPGA XC7K325T作为实时处理器,实现各个接口之间的互联。板载1组64位的DDR3 SDRAM用作数据缓存。板卡具有1个FMC…...
linux-进程信号的产生
Linux中的进程信号(signal)是一种用于进程间通信或向进程传递异步事件通知的机制。信号是一种软中断,用于通知进程某个事件的发生,如错误、终止请求、计时器到期等。 1. 信号的基本概念 - 信号(Signal)&am…...
基于 Nexus 在 Dockerfile 配置 yum, conda, pip 仓库的方法和参考
在 Nexus 配置代理仓库的方法,可参考 pypi 的配置博客:https://hellogitlab.com/CI/docker/create_your_nexus_2 更多代理格式,参考官方文档,如 pypi:https://help.sonatype.com/en/pypi-repositories.html 配置 yum…...
精品可编辑PPT | 全面风险管理信息系统项目建设风控一体化标准方案
这份文档是一份全面风险管理信息系统项目建设风控一体化标准方案,涵盖了业务架构、功能方案、系统技术架构设计、项目实施及服务等多个方面的详细内容。方案旨在通过信息化手段提升企业全面风险管理工作水平,促进风险管理落地和内部控制规范化࿰…...
Redis集群安装
Redis集群安装 1.集群介绍 首先要了解,Redis的高可用机制。 2个master节点,挂掉1个,1不过半,则集群宕机,不可用,容错率为0;3个master节点,挂掉1个,2>1,…...
下载知网外文文献全文的方法
知网和一些外文数据库机构是合作关系,因知网没有订购外文文献全文,所以可以搜到外文文献但不能下载全文,基本提供的都是外文文献摘要。本文就实例演示一下获取知网外文文献全文的方法步骤。 例如下面这篇知网外文文献,该文献被收…...
解决IDEA无法运行git的问题
之前git一直没有问题,今天打开就提示我安装git,自然用git去提交新项目也会遇到问题。 我出现问题的原因是:git路径缺失 文件->设置->git 发现git的路径为空,按照实际位置填写即可...
基于Qt6 + MuPDF在 Arm IMX6ULL运行的PDF浏览器——MuPDF Adapter文档
项目地址:总项目Charliechen114514/CCIMXDesktop: This is a Qt Written Desktop with base GUI Utilities 本子项目地址:CCIMXDesktop/extern_app/pdfReader at main Charliechen114514/CCIMXDesktop 前言 这个部分说的是Mupdf_adaper下的文档的工…...
Ubuntu20.04 搭建Kubernetes 1.28版本集群
环境依赖 以下操作,无特殊说明,所有节点都需要执行 安装 ssh 服务安装 openssh-server复制代码 sudo apt-get install openssh-server修改配置文件复制代码 vim /etc/ssh/sshd_config找到配置项 复制代码 LoginGraceTime 120 PermitRootLogin prohibit-password StrictModes…...
操作系统和数据库账号密码的安全管理、使用,安当SMS凭据管理系统
引言:密码管理困局下的破局之道 在数字化转型的深水区,企业正面临前所未有的密码管理挑战。某跨国制造企业因数据库密码泄露导致核心工艺参数外泄,某三甲医院因运维账号滥用引发百万级医疗数据泄露事件,这些真实案例揭示着传统密…...
Java设计模式之代理模式:从入门到精通(保姆级教程)
1. 代理模式概述 代理模式(Proxy Pattern)是一种结构型设计模式,它为其他对象提供一种代理以控制对这个对象的访问。代理对象在客户端和目标对象之间起到中介作用,可以在不改变目标对象代码的情况下增加额外的功能。 1.1 专业概念解释 代理模式:为其他对象提供一种代理…...
单片机-STM32部分:13-1、蜂鸣器
飞书文档https://x509p6c8to.feishu.cn/wiki/V8rpwIlYIiEuXLkUljTcXWiKnSc 一、应用场景 大部分的电子产品、家电(风扇、空调、电水壶)都会有蜂鸣器,用于提示设备的工作状态 二、原理 蜂鸣器是一种将电信号转换为声音信号的器件࿰…...
JVM——方法内联
引入 在现代软件开发中,性能优化始终是一个关键课题。随着硬件架构的不断演进,CPU的主频提升逐渐放缓,而软件复杂度却持续增加,这使得编译器优化技术的重要性日益凸显。方法内联(Method Inlining)作为编译…...
C++类成员
一、内联函数(Inline Functions) 作用 解决频繁调用小函数时的栈内存消耗问题,通过将函数代码直接插入调用点,避免压栈/出栈开销。 定义形式 inline 返回类型 函数名(参数列表) { ... }• 隐式声明:类内直接定义的成员…...
SpringBoot校园失物招领信息平台
SpringBoot校园失物招领信息平台 文章目录 SpringBoot校园失物招领信息平台1、技术栈2、项目说明2.1、登录注册2.2、管理员端截图2.3、用户端截图 3、核心代码实现3.1、前端首页3.2、前端招领广场3.3、后端业务处理 1、技术栈 本项目采用前后端分离的架构,前端和后…...
代码随想录算法训练营第三十八天
LeetCode题目: 1143. 最长公共子序列1035. 不相交的线53. 最大子数组和392. 判断子序列2094. 找出 3 位偶数(每日一题) 其他: 今日总结 往期打卡 1143. 最长公共子序列 跳转: 1143. 最长公共子序列 学习: 代码随想录公开讲解 问题: 给定两个字符串 text1 和 text2࿰…...
Nginx stream模块是连接级别的负载均衡
在Nginx的stream模块中,upstream的权重配置实现的是连接级别的负载均衡,这和http模块不同。 当客户端发起一个新的TCP连接时,Nginx根据各upstream的权重值选择其中一个upstream建立连接,之后该连接上的所有数据传输都由这个upstre…...
贝叶斯算法
贝叶斯算法是一类基于贝叶斯定理的机器学习算法,它们在分类任务中表现出色,尤其在处理具有不确定性和 probabilistic 关系的数据时具有独特优势。本文将深入探讨贝叶斯算法的核心原理、主要类型以及实际应用案例,带你领略贝叶斯算法在概率推理…...
计算机网络:CPU与时钟的关系
在计算机中,CPU(中央处理器)与时钟的关系是核心且密不可分的。时钟信号是驱动CPU运行的“心跳”,决定了计算机执行指令的节奏和协调性。以下是两者的关键关系及作用: 1. 时钟信号:CPU的“节拍器” 时钟频率(Clock Speed) CPU的时钟频率(如3.5 GHz)表示每秒的时钟周期…...
java中强引用、软应用、弱应用、虚引用
在Java中,引用类型决定了对象的生命周期和垃圾回收的时机。Java提供了四种不同的引用类型:强引用、软引用、弱引用和虚引用。每种引用类型的行为和用途不同,了解这些差异对优化内存管理和垃圾回收非常重要。 1. 强引用(Strong Re…...
分析红黑树工程实用的特点
🧭 本节目标 理解红黑树在工程中的优劣势对比红黑树与其他数据结构(AVL 树、跳表、哈希表等)分析红黑树为何成为内核级应用(如 Linux CFS、内存管理)首选总结红黑树工程上的典型使用建议 一、红黑树工程级使用的主要特…...
C/C++ 内存管理深度解析:从内存分布到实践应用(malloc和new,free和delete的对比与使用,定位 new )
一、引言:理解内存管理的核心价值 在系统级编程领域,内存管理是决定程序性能、稳定性和安全性的关键因素。C/C 作为底层开发的主流语言,赋予开发者直接操作内存的能力,却也要求开发者深入理解内存布局与生命周期管理。本文将从内…...
如何使用主机名在 CMD 中查找 IP 地址?
在网络中,每个系统都有一个由几位数字组成的唯一标识,称为 IP 地址。然而,记住它们可能是一项艰巨的任务,尤其是当系统数量众多时。例如,互联网上运行的每个网站都有一个 IP 地址,以便其他系统在需要时可以调用它们,但你认为记住我们访问的每个网站的长串数字是可行的吗…...
解读RTOS:第二篇 · 线程/任务管理与调度策略
1. 引言 在 RTOS 中,线程(Task)是最基本的执行单元,它封装了应用功能、资源使用和优先级属性。任务管理与调度策略决定了系统在多任务场景下的响应速度、资源分配效率与实时性保证。理解并掌握任务创建、状态转换、优先级设计和调度算法,是 RTOS 应用开发的核心内容。 2…...
linux下minio的进程管理脚本
准备工作: 参考链接: Deploy MinIO: Single-Node Single-Drive — MinIO Object Storage for Linux 下载: wget https://dl.min.io/server/minio/release/linux-amd64/minio kill-app.sh #!/bin/bash # 文件名: kill-app.sh…...
论文学习_A Survey of Binary Code Similarity
摘要:二进制代码相似性方法的主要目的是比较两个或多个二进制代码片段,以识别它们之间的相似性与差异(研究背景)。由于在许多实际场景中源代码往往不可获取,因此具备比较二进制代码的能力显得尤为重要,例如…...
python标准库--sys - 系统相关功能在算法比赛的应用
目录 1. 快速输入输出 2. 调整递归深度限制 1. 快速输入输出 算法比赛中,大量数据的读写可能成为瓶颈。sys.stdin和sys.stdout比内置的input()和print()效率更高。 import sys# 读取多行输入(每行一个整数) n int(sys.stdin.readline()) …...
运算放大器相关的电路
1运算放大器介绍 解释:运算放大器本质就是一个放大倍数很大的元件,就如上图公式所示 Vp和Vn相差很小但是放大后输出还是会很大。 运算放大器不止上面的三个引脚,他需要独立供电; 如图比较器: 解释:Vp&…...
进程和线程
目录 1. 基本定义 2. 核心区别 3. 优缺点对比 进程和线程是操作系统中用于实现并发执行的两个核心概念,它们既有相似之处,又有明显的区别。下面从多个维度对它们进行对比分析: 1. 基本定义 进程(Process) 进程是程…...
生成对抗网络(GAN)深度解析:理论、技术与应用全景
生成对抗网络(Generative Adversarial Networks,GAN)作为深度学习领域的重要突破,通过对抗训练框架实现了强大的生成能力。本文从理论起源、数学建模、网络架构、工程实现到行业应用,系统拆解GAN的核心机制,涵盖基础理…...
Java面试全记录:Spring Cloud+Kafka+Redis实战解析
Java面试全记录:Spring CloudKafkaRedis实战解析 人物设定 姓名:张伟(随机生成唯一姓名) 年龄:28岁 学历:硕士 工作年限:5年 工作内容: 基于Spring Cloud搭建微服务架构使用Kafka…...
人脸识别deepface相关笔记
人脸识别deepface相关笔记 项目地址项目结构 项目地址 https://github.com/serengil/deepface.git 项目结构...
量子加密通信:守护信息安全的未来之盾
摘要 在数字化时代,信息安全成为全球关注的焦点。传统加密技术面临着被量子计算破解的风险,而量子加密通信作为一种基于量子力学原理的新型加密技术,提供了理论上无条件安全的通信保障。本文将详细介绍量子加密通信的基本原理、技术实现、应用…...
三、transformers基础组件之Model
1. 什么是Model Head Model Head 是连接在模型后的层,通常为1个或多个全连接层Model Head 将模型的编码的表示结果进行映射,以解决不同类型的任务 不同的任务会有不同的Model Head。 2. 模型加载 2.1 在线加载 预训练模型的加载与Tokenizer类似,我们只需要指定想…...
【语法】C++的多态
目录 虚函数的重写: 虚函数 重写(覆盖) 虚函数重写的两个例外: 协变: 析构函数的重写: 练习: final和override关键字 抽象类 接口继承和实现继承 虚函数重写的原理: 打印虚函数表: …...
WebGIS开发新突破:揭秘未来地理信息系统的神秘面纱
你有没有想过,未来的地理信息系统(GIS)会是什么样子?是像电影里那样,一块透明屏幕就能呈现整个城市的实时动态?还是像《钢铁侠》中那样,一个手势就能操控全球地图? 其实,…...
JVM类加载
JVM类加载 1. 类的生命周期(类加载过程)类加载的五个阶段: 2. 类加载器的分类3. 双亲委派模型4. 类的卸载与热加载5.类加载器命名空间隔离 1. 类的生命周期(类加载过程) 类加载的五个阶段: 加载ÿ…...
AD开启交叉选择功能,只选中器件,不选中网络、焊盘
AD开启交叉选择功能,只选中器件,不选中网络、焊盘。 一、打开首选项 二、打开System→Navigationg,配置如下。 三、最后点击OK即可。...
机器学习——集成学习基础
一、鸢尾花数据训练模型 1. 使用鸢尾花数据分别训练集成模型:AdaBoost模型,Gradient Boosting模型 2. 对别两个集成模型的准确率以及报告 3. 两个模型的预测结果进行可视化 需要进行降维处理,两个图像显示在同一个坐标系中 代码展示&…...
C++匿名函数
C 中的匿名函数(Lambda 表达式)是 C11 引入的一项重要特性,它允许你在需要的地方定义一个临时的、无名的函数对象,使代码更加简洁和灵活。 1. 基本语法 Lambda 表达式的基本结构: [capture list](parameter list) -…...
互联网大厂Java面试实战:Spring Boot到微服务的技术问答解析
💪🏻 1. Python基础专栏,基础知识一网打尽,9.9元买不了吃亏,买不了上当。 Python从入门到精通 😁 2. 毕业设计专栏,毕业季咱们不慌忙,几百款毕业设计等你选。 ❤️ 3. Python爬虫专栏…...
神经网络是如何工作的
人工智能最核心的技术之一,就是神经网络(Neural Networks)。但很多初学者会觉得它是个黑盒:为什么神经网络能识别图片、翻译语言,甚至生成文章? 本文用图解最小代码实现的方式,带你深入理解&am…...
Kubernetes控制平面组件:Kubelet详解(二):核心功能层
云原生学习路线导航页(持续更新中) kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计(一)Kubernetes架构原则和对象设计(二)Kubernetes架构原则和对象设计(三)Kubernetes控…...
【android bluetooth 框架分析 02】【Module详解 13】【CounterMetrics 模块介绍】
1. CounterMetrics 介绍 CounterMetrics 模块代码很少, 我简单介绍一下。 // system/gd/metrics/counter_metrics.cc #define LOG_TAG "BluetoothCounterMetrics"#include "metrics/counter_metrics.h"#include "common/bind.h" #i…...
Matlab自学笔记五十四:符号数学工具箱和符号运算、符号求解、绘图
1.什么是符号数学工具箱? 符号数学工具箱是Matlab针对符号对象的运算功能,它引入了一种特殊的数据类型 - 符号对象; 该数据类型包括符号数字,符号变量,符号表达式和符号函数,还包含符号矩阵,以…...
Matlab 模糊控制平行侧边自动泊车
1、内容简介 Matlab 233-模糊控制平行侧边自动泊车 可以交流、咨询、答疑 2、内容说明 略 3、仿真分析 略 4、参考论文 略...
新书速览|纯血鸿蒙HarmonyOS NEXT原生开发之旅
《纯血鸿蒙HarmonyOS NEXT原生开发之旅》 本书内容 《纯血鸿蒙HarmonyOS NEXT原生开发之旅》全面系统地介绍了基于HarmonyOS NEXT系统进行原生应用开发的实用技巧。全书共12章,内容涵盖从基础工具使用到高级功能实现的各个方面。第1章详细介绍了开发环境的搭建、Ar…...
tinyint(3)数据类型讲解
TINYINT(3) 是数据库中用于定义字段数据类型的一种写法,常见于 MySQL 等数据库系统。下面来详细了解其含义和作用: 数据类型本质 TINYINT 属于整数类型,在不同的数据库系统中,它所占用的存储空间和表示范围通常是固定的。以 MyS…...
manjaro系统详解
1. Manjaro 概述 Manjaro 是一款基于 Arch Linux 的滚动更新发行版,以 用户友好、易用性 和 硬件兼容性 为核心设计理念。它继承了 Arch 的灵活性和软件丰富性,同时通过图形化工具和稳定的更新策略降低了使用门槛,适合从新手到高级用户的广泛…...