当前位置: 首页 > news >正文

摸鱼摸出来的vue3+element-plus毒蘑菇后台管理:新标签页的实现。

在浏览器中,点击标签页右边的加号可以新加一个标签页,所以,在毒蘑菇后台管理(简称毒蘑菇儿)中也可以这样操作。

毒蘑菇 - 后台管理

点击标签页右边的+按钮就可以打开一个新标签页了,可以打开多个,互不冲突,在新标签页中可以搜索你想要打开的页面,点击后会将该标签页替换成你点击后的页面(跟浏览器操作一致)。点击正上方的搜索框或者alt+s同样也能打开新标签页。新标签页的页面权限需要在菜单权限数据源中配置,也可以内置几条数据固定在权限列表中不做修改,由用户和开发者决定。

代码实现步骤:

1:添加标签页页面

代码如下,点击查看,因为有点长就不贴出来了

2:添加路由

添加新标签页子路由,在router/index.js中配置即可,写过vue的不会不知道吧?

{path: 'new-tag-page/:sign',component: () => import('@/views/system/newTagPage/index.vue'),name: 'new-tag-page',meta: { isMenu:true,  //表示该页面是作为菜单的页面},
}
3:配置页面权限

虽然配置了路由页面,表示系统中有该页面了,但是需要配置用户是否可以访问该页面。目前使用的是虚拟数据,http/User.js 中新加一条数据表示该用户可以访问该页面。

{name:"new-tag-page",  //需要和路由中配置的名称一致title:'新标签页',  //打开页面后标签中显示的名称isCache:true,  //页面缓存hidden:true,  //不在左侧菜单中显示
}

经过以上三个步骤,我们就完成了毒蘑菇儿的新标签页的功能了,是不是很简单呢。

点击查看DEMO

相关文章:

  • GLTF编辑器-位移贴图实现破碎的路面
  • GaussDB数据库中的同义词SYNONYM
  • 《深入理解JAVA虚拟机笔记》类加载机制
  • leetcode151. 反转字符串中的单词
  • 基于yolov2深度学习网络的血细胞检测算法matlab仿真
  • Python+Yolov5+Qt交通标志特征识别窗体界面相片视频摄像头
  • 【自然语言处理】类似GPT的模型
  • 深度学习框架:Tensorflow和pytorch、PaddlePaddle比较
  • C语言实例_stdlib.h库函数功能及其用法详解
  • vue3项目使用pako库解压后端返回zip数据
  • Tailwind CSS 在Html中的使用
  • 网络安全(黑客)技术——高效自学
  • k8s的陈述式资源管理(命令行操作)
  • StringUtils常用方法解析
  • 安装 yarn、pnpm、功能比较
  • hexo+github搭建个人博客
  • 《Java编程思想》读书笔记-对象导论
  • 《网管员必读——网络组建》(第2版)电子课件下载
  • express + mock 让前后台并行开发
  • go append函数以及写入
  • java中的hashCode
  • k个最大的数及变种小结
  • Python连接Oracle
  • tensorflow学习笔记3——MNIST应用篇
  • 测试开发系类之接口自动化测试
  • 给github项目添加CI badge
  • 猴子数据域名防封接口降低小说被封的风险
  • 机器学习学习笔记一
  • 使用putty远程连接linux
  • 通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout
  • 移动端解决方案学习记录
  • Java性能优化之JVM GC(垃圾回收机制)
  • ​猴子吃桃问题:每天都吃了前一天剩下的一半多一个。
  • #基础#使用Jupyter进行Notebook的转换 .ipynb文件导出为.md文件
  • #快捷键# 大学四年我常用的软件快捷键大全,教你成为电脑高手!!
  • (大众金融)SQL server面试题(1)-总销售量最少的3个型号的车及其总销售量
  • (第9篇)大数据的的超级应用——数据挖掘-推荐系统
  • (二十一)devops持续集成开发——使用jenkins的Docker Pipeline插件完成docker项目的pipeline流水线发布
  • (经验分享)作为一名普通本科计算机专业学生,我大学四年到底走了多少弯路
  • (切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包
  • (三)模仿学习-Action数据的模仿
  • (三分钟)速览传统边缘检测算子
  • (一)ClickHouse 中的 `MaterializedMySQL` 数据库引擎的使用方法、设置、特性和限制。
  • (一)pytest自动化测试框架之生成测试报告(mac系统)
  • (幽默漫画)有个程序员老公,是怎样的体验?
  • (转)linux下的时间函数使用
  • ..回顾17,展望18
  • .NET Core引入性能分析引导优化
  • .NET Framework 服务实现监控可观测性最佳实践
  • .net refrector
  • .NET 命令行参数包含应用程序路径吗?
  • .net解析传过来的xml_DOM4J解析XML文件
  • .NET中的Exception处理(C#)
  • @CacheInvalidate(name = “xxx“, key = “#results.![a+b]“,multi = true)是什么意思
  • @EnableAsync和@Async开始异步任务支持