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

news2024/11/24 13:00:06

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

毒蘑菇 - 后台管理

点击标签页右边的+按钮就可以打开一个新标签页了,可以打开多个,互不冲突,在新标签页中可以搜索你想要打开的页面,点击后会将该标签页替换成你点击后的页面(跟浏览器操作一致)。点击正上方的搜索框或者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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1343508.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Animate 2024(Adobe an2024)

Animate 2024是一款由Adobe公司开发的动画和互动内容创作工具,是Flash的演进版本。Animate 2024为设计师和开发者提供了更丰富的功能,让他们能够创建各种类型的动画、交互式内容和多媒体应用程序。 Animate 2024具有以下特点: 强大的设计工…

UE5.1_Gameplay Debugger启用

UE5.1_Gameplay Debugger启用 重点问题: Gamplay Debugger启用不知道? Apostrophe、Tilde键不知道是哪个? Gameplay调试程序 | 虚幻引擎文档 (unrealengine.com) Gameplay Debugger

一些深度学习训练过程可视化以及绘图工具

常见的可视化方法 深度学习训练过程的可视化是一个重要的环节,它可以帮助研究人员和工程师更好地理解和调整他们的模型。常见的可视化方法包括: 损失和准确率曲线: 这是最常见的可视化类型,通常在训练过程中绘制损失函数和准确率…

【网络技术】【Kali Linux】Wireshark嗅探(三)用户数据报(UDP)协议

一、实验目的 本次实验使用wireshark流量分析工具进行网络嗅探,旨在了解UDP协议的报文格式。 二、网络环境设置 本次实验使用Kali Linux虚拟机完成,主机操作系统为Windows 11,虚拟化平台选择Oracle VM VirtualBox,组网模式选择…

软件测试/测试开发丨Windows系统chromedriver安装与环境变量配置

一、selenium 环境配置 1、chrome 浏览器的安装与配置 目前比较常用的浏览器是 Google Chrome 浏览器,所以本教程以 chrome 为主,后面简介一下其他浏览器的环境配置。 (1)chrome 下载: www.google.cn/chrome/ (2&a…

日志记录、跟踪和指标

我的新书《Android App开发入门与实战》已于2020年8月由人民邮电出版社出版,欢迎购买。点击进入详情 日志记录、跟踪和指标是系统可观察性的三大支柱。 下图显示了它们的定义和典型架构。 记录 日志记录系统中的离散事件。例如,我们可以将传入请求或对…

回归预测 | MATLAB实ZOA-LSTM基于斑马优化算法优化长短期记忆神经网络的多输入单输出数据回归预测模型 (多指标,多图)

回归预测 | MATLAB实ZOA-LSTM基于斑马优化算法优化长短期记忆神经网络的多输入单输出数据回归预测模型 (多指标,多图) 目录 回归预测 | MATLAB实ZOA-LSTM基于斑马优化算法优化长短期记忆神经网络的多输入单输出数据回归预测模型 (…

ubuntu python播放MP3,wav音频和录音

目录 一.利用pygame(略显麻烦,有时候播放不太正常)1.安装依赖库2.代码 二.利用mpg123(简洁方便,但仅争对mp3)1.安装依赖库2.代码 三.利用sox(简单方便,支持的文件格式多)…

jvm实战之-常用jvm命令的使用

各命令的使用 JMAP 1、查看内存信息,对象实例数、对象占有大小 jmap -histo 进程号>./log.txt2、查看堆的配置信息和使用情况 jmap - heap 进程号3、将堆的快照信息dump下来,使用java自带的jvisualvm.exe打开分析 jmap -dump:formatb,filedump.h…

oracle学习(5)

数据处理 SQL语言的类型: 1. 数据库中,称呼增删改查,为DML语句。(Data Manipulation Language 数据操纵语言),就是指代: insert、update、delete、select这四个操作。 2. DDL语句。(Data Definition Language 数据…

提升数据库性能的关键指南-Oracle AWR报告

文章目录 一、了解AWR报告:数据库性能的仪表盘二、生成AWR报告三、解读AWR报告的关键部分1.报告开头的系统基础信息2.ADDM发现3.负载概览(Load Profile)4.参数文件5.顶级前台等待事件6.SQL 统计信息-顶级SQL7.SGA Advisory AND PAG Advisory 一、了解AWR报告&#x…

帆软报表中定时调度中的最后一步如何增加新的处理方式

在定时调度中,到调度执行完之后,我们可能想做一些别的事情,当自带的处理方式不满足时,可以自定义自己的处理方式。 产品的处理方式一共有如下这些类型: 我们想在除了上面的处理方式之外增加自己的处理方式应该怎么做呢? 先看下效果: 涉及到两方面的改造,前端与后端。…

出海合规云安全,AWS Landing Zone解决方案建立安全着陆区

在出海的大环境中,企业数字化转型的趋势之一就是上云。然而,上云也带来了新的挑战,特别是对企业的 IT 建设和管理提出了更高的要求。为了构建一个安全合规的云上信息系统环境,满足企业中不同用户的快速增长、资源访问可控、成本可…

动态新增input输入框

实现原理,修改绑定数组的长度。 需要绑定的数组 memberList: [{userName: ,phone: ,position: }], 点击时触发修改绑定数组长度的方法 addItem() {this.memberList.push({name: , phone: , post: })}, deleteItem(item, index) {this.inputForm.memberList.splice(i…

02.Git远程仓库

一、常用的托管服务 1.gitHub 一个面向开源及私有软件项目的托管平台,只支持Git作为唯一的版本库格式进行托管。 2.码云(gitee) 是国内的一个代码托管平台,服务器在国内,所有相较于gitHub使用起来更加方便一点。 3.gitLab 是一个用于仓库管…

如何在MAC OS中的XCODE下添加 <bits/stdc++.h>

mac上使用的编译器是Clang,但是没有万能头文件bits/stdc.h\,本文介绍如何添加万能头文件 Xcode 版本:15.1 - 打开应用程序-Xcode-右键显示包内容 Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/includ…

华为无线ac双链路冷备和热备配置案例

所谓的冷备和热备,冷备就是不用vrrp和hsb协议同步ap和用户信息,主的断了等七十五秒后,备的capwap和ap连接上去。 双链路冷备不用vrrp和hsb 双链路热备份只用hsb同步ap和用户信息,不用vrrp,两个ac可以不用在同一个二层…

java设计模式实战【策略模式+观察者模式+命令模式+组合模式,混合模式在支付系统中的应用】

引言 在代码开发的世界里,理论知识的重要性毋庸置疑,但实战经验往往才是知识的真正试金石。正所谓,“读万卷书不如行万里路”,理论的学习需要通过实践来验证和深化。设计模式作为软件开发中的重要理论,其真正的价值在…

使用Vscode远程debug报错找不到Module找不到File

1..报第一个错 提示我无法导入自己写的module 如图: 解决办法: stackoverflow上说的在launch.json中加了一条 env,就解决了。 "env": { "PYTHONPATH":"/home/zt/ge-sc-master/ge-sc-master"}, 2.解决完第一个…

机器学习的一般步骤

机器学习专注于让机器从大量的数据中模拟人类思考和归纳总结的过程,获得计算模型并自动判断和推测相应的输出结果。机器学习的一般步骤可以概括为以下几个阶段: 数据收集和准备: 收集与问题相关的数据,并确保数据的质量和完整性。…