摸鱼摸出来的vue3+element-plus毒蘑菇后台管理:新标签页的实现。
2023-12-29 12:54:01
在浏览器中,点击标签页右边的加号可以新加一个标签页,所以,在毒蘑菇后台管理(简称毒蘑菇儿)中也可以这样操作。
点击标签页右边的+
按钮就可以打开一个新标签页了,可以打开多个,互不冲突,在新标签页中可以搜索你想要打开的页面,点击后会将该标签页替换成你点击后的页面(跟浏览器操作一致)。点击正上方的搜索框或者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, //不在左侧菜单中显示
}
经过以上三个步骤,我们就完成了毒蘑菇儿的新标签页的功能了,是不是很简单呢。
文章来源:https://blog.csdn.net/wjlhanhan/article/details/135284251
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!