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

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

时间:2023-12-29 10:34:18浏览次数:40  
标签:标签 element 毒蘑菇 点击 plus new 路由 页面

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

毒蘑菇 - 后台管理

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

标签:标签,element,毒蘑菇,点击,plus,new,路由,页面
From: https://blog.51cto.com/u_16400430/9024305

相关文章

  • 自己写的mapper.xml如何使用mybatis-plus的自带分页?
    在MyBatis-Plus中,使用自带的分页功能非常简单。首先,确保你的mapper.xml文件中定义了需要的SQL语句,并在相应的mapper接口中使用IPage类型的参数进行分页。接下来,使用Page类来包装查询条件,并调用Mapper接口的分页方法。首先,假设你的mapper.xml中有类似如下的查询语句:<!--在mapper.xm......
  • Mybatis-Plus 常用注解总结
    在框架的使用中,注解约定大于配置,我们可以轻松通过注解完成很多工作,比如字段改名映射,插入更新的时间写入等,下面的学习内容主要列举了常用的注解。我们看看官网中列出的注解有哪些[1]:本文的注解学习主要内容集中在以下的注解中:@TableName@TableId@TableField@EnumValue@Ver......
  • Java Spring Boot Mybatis-Plus 的简单使用
    此文主要基于官网case整理,如需了解更多详情,请移步官网。环境:SpringBoot:3.1.6JDK:17MySQL:5.7数据准备主要是MySQL建库建表,插入一些数据。建库:CREATEDATABASEmybatis_demo;建表:DROPTABLEIFEXISTS`user`;CREATETABLE`user`(idBIGINTNOTNULLCOMME......
  • D. Split Plus K
    原题链接什么时候无解?有解计算code#include<bits/stdc++.h>#definelllonglongusingnamespacestd;lla[200005]={0};intmain(){llt;cin>>t;while(t--){lln,k;cin>>n>>k;llzs=0,fs=0;f......
  • 使用Element.animate()实现动画
    Element.animate()实现<divid="app"><button@click="startAmi">开始</button><p>{{msg}}</p></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><s......
  • OnePlus 6 体验 Mobian 折腾记录
    1.刷入Mobian解BL锁等操作在此不赘述。1.1.下载刷机包进入Mobian镜像下载页,找到SDM845,进入weekly目录,下载最新构建的刷机包;1.2.刷入系统①将手机重启至fastboot模式,连接到电脑;②解压,在电脑上打开终端,依次输入:fastbootflashboot解压出来的boot镜像的路......
  • 香橙派5plus从ssd启动Ubuntu
    官方接口图我实际会用到的就几个接口,背面的话就一个M.2固态的位置:其中WIFI模块的接口应该也可以插2230的固态,不过是pcie2.0的速度,背面的接口则是pcie3.0*4的速度,差距还是挺大的。开始安装系统准备工作一张内存卡(如果买的时候没有emmc的话)下载并安装balenaEtcher一个m.......
  • 2.3T NPU强势登场!NXP i.MX 8M Plus开启工业新篇章,14纳米!
            更多产品详情以及购买咨询可添加如下客服人员微信 (即刻添加,马上咨询) 更多i.MX8MPlus产品资料可长按二维码识别下载如需选购,请登录创龙科技天猫旗舰店:tronlong.tmall.com!欢迎加入i.MX8MPlus技术交流群:1064661665......
  • Cannot read properties of null (reading 'parentElement')问题的解决
    问题描述出现了一堆这种报错,echarts真的,我的一生之敌~~~~~问题解决发现,我使用输入框,将文本内容传递到后端,然后再传回到这个界面,就直接引起了整体的报错,在我去掉输入框时,这个错误就被解决啦~~~所以,我就直接将条件输入的文本框与图表分开了,这样就能够解决上面那个问题啦!......
  • vue3 elementplus 表格表头过长 三个点显示
    vue3:constrenderHeaderMethods=({column})=>{returncreateVNode(resolveComponent('el-tooltip'),{effect:'dark',content:column.label,placement:'top'......