系列文章目录
《SpringBoot整合SpringSecurity实现权限控制(一):实现原理》
《SpringBoot整合SpringSecurity实现权限控制(二):权限数据基本模型设计》
《SpringBoot整合SpringSecurity实现权限控制(三):前端动态装载路由与菜单》
《SpringBoot整合SpringSecurity实现权限控制(四):角色管理》
《SpringBoot整合SpringSecurity实现权限控制(五):用户管理》
《SpringBoot整合SpringSecurity实现权限控制(六):菜单管理》
《SpringBoot整合SpringSecurity实现权限控制(七):权限分配》
一、需求描述
多标签页 (Tabs) 的设计对于多窗口多任务管理有着无与伦比的高效率与方便性
- 在上面的文章中已经实现了后台管理的基本权限功能,包括用户、角色、菜单管理及权限分配。
- 用户通过单击侧边栏的菜单,就可以调出对应的功能页面进行使用。但在使用的过程中,我们发现程序只能在同一时间打开一个页面。我们更希望打开多个功能页面时,这些页面以标签的形式集成在同一个窗口显示,要想切换到某个页面或是关闭某个页面,我们只需要操作相应的标签即可,非常方便快捷。
二、前端实现
- 使用element tabs组件搭建基础的多标签页,示例如下:
<template>
<div class="tabbar-container">
<el-tabs v-model="pageCurrent" type="card" closable @tab-click="tabChange" @tab-remove="removeTab">
<el-tab-pane
v-for="(item) in pageList"
:key="item.name"
:name