element怎么实现二级菜单和顶部导航联动
发表于：2025-02-08 作者：千家信息网编辑
千家信息网最后更新 2025年02月08日，这篇文章主要介绍"element怎么实现二级菜单和顶部导航联动"，在日常操作中，相信很多人在element怎么实现二级菜单和顶部导航联动问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希
千家信息网最后更新 2025年02月08日element怎么实现二级菜单和顶部导航联动
这篇文章主要介绍"element怎么实现二级菜单和顶部导航联动"，在日常操作中，相信很多人在element怎么实现二级菜单和顶部导航联动问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"element怎么实现二级菜单和顶部导航联动"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
目前
原本数据结构
const users = [{ id: 1, username: 'normal', password: 'normal', token: 'abcdefghijklmnopqrstuvwxyz', leftMenus: [{ title: '用户管理', key: '/user', name: 'user', icon: 'el-icon-user-solid', rights: ['view', 'edit', 'add', 'delete'] }, { title: '商品管理', key: '/products', name: 'products', icon: 'el-icon-s-goods', children: [{ title: '品类管理', key: '/category', name: 'category', icon: 'el-icon-s-ticket', rights: ['view', 'edit', 'add', 'delete'] }, { title: '商品生产', key: '/product', name: 'product', icon: 'el-icon-s-promotion', rights: ['view', 'edit', 'add', 'delete'] } ] }, { title: '图形图表', key: '/charts', name: 'charts', icon: 'el-icon-picture', children: [{ title: '柱线图', key: '/charts/bar', name: 'bar', icon: 'el-icon-s-data', rights: ['view', 'edit', 'add', 'delete'] }, { title: '折线图', key: '/charts/line', name: 'line', icon: 'el-icon-s-marketing', rights: ['view', 'edit', 'add', 'delete'] }, { title: '饼图', key: '/charts/pie', name: 'pie', icon: 'el-icon-s-help', rights: ['view', 'edit', 'add', 'delete'] }, ] } ] }, { id: 2, username: 'admin', password: 'admin', token: 'abcdefghijklmnopqrstuvwxyz'.split('').reverse().join(''), leftMenus: [{ title: '用户管理', key: '/user', name: 'user', icon: 'el-icon-user-solid', rights: ['view', 'edit', 'add', 'delete'] }, { title: '商品管理', key: '/products', name: 'products', icon: 'el-icon-s-goods', children: [{ title: '品类管理', key: '/category', name: 'category', icon: 'el-icon-s-ticket', rights: ['view', 'edit', 'add', 'delete'] }, { title: '商品生产', key: '/product', name: 'product', icon: 'el-icon-s-promotion', rights: ['view', 'edit', 'add', 'delete'] } ] }, { title: '角色管理', key: '/role', name: 'role', icon: 'el-icon-s-custom', rights: ['view', 'edit', 'add', 'delete'] }, { title: '图形图表', key: '/charts', name: 'charts', icon: 'el-icon-picture', children: [{ title: '柱线图', key: '/charts/bar', name: 'bar', icon: 'el-icon-s-data', rights: ['view', 'edit', 'add', 'delete'] }, { title: '折线图', key: '/charts/line', name: 'line', icon: 'el-icon-s-marketing', rights: ['view', 'edit', 'add', 'delete'] }, { title: '饼图', key: '/charts/pie', name: 'pie', icon: 'el-icon-s-help', rights: ['view', 'edit', 'add', 'delete'] }, ] } ] }]因为新增顶部导航，所以要重新构建数据结构 。
修改后的数据结构
const users = [{ id: 1, username: 'normal', password: 'normal', token: 'abcdefghijklmnopqrstuvwxyz', navBar: { active: '0', list: [{ name: "首页", subActive: '0', leftMenus: [{ id: 1, title: '用户管理1', key: '/user', name: 'user', icon: 'el-icon-user-solid', rights: ['view', 'edit', 'add', 'delete'] }, { id: 2, title: '商品管理', name: 'products', icon: 'el-icon-s-goods', children: [{ id: 21, title: '品类管理', key: '/category', name: 'category', icon: 'bars', rights: ['view', 'edit', 'add', 'delete'] }, { id: 22, title: '商品生产', key: '/product', name: 'product', icon: 'tool', rights: ['view', 'edit', 'add', 'delete'] } ] }, { id: 4, title: '图形图表', name: 'charts', icon: 'el-icon-s-platform', children: [{ id: 41, title: '柱线图', key: '/charts/bar', name: 'bar', icon: 'el-icon-s-data', rights: ['view', 'edit', 'add', 'delete'] }, { id: 42, title: '折线图', key: '/charts/line', name: 'line', icon: 'el-icon-s-marketing', rights: ['view', 'edit', 'add', 'delete'] }, { id: 43, title: '饼图', key: '/charts/pie', name: 'pie', icon: 'el-icon-s-help', rights: ['view', 'edit', 'add', 'delete'] }, ] } ] }, { name: "商品", subActive: '0', leftMenus: [{ id: 1, title: '用户管理2', key: '/user2', name: 'user2', icon: 'el-icon-user-solid', rights: ['view', 'edit', 'add', 'delete'] }] }, { name: "订单", subActive: '0', leftMenus: [{ id: 32, title: '订单管理', key: '/dingg', name: 'dingg', icon: 'el-icon-user-solid', rights: ['view', 'edit', 'add', 'delete'] }, { id: 34, title: '订单统计', name: 'ding', icon: 'el-icon-user-solid', children: [{ id: 35, title: '订单汇总', key: '/ding/hui', name: 'dinghui', icon: 'el-icon-s-data', rights: ['view', 'edit', 'add', 'delete'] }, ] } ] }, { name: "会员" }, { name: "设置" }, ] } }, { id: 2, username: 'admin', password: 'admin', token: 'abcdefghijklmnopqrstuvwxyz'.split('').reverse().join(''), /* rights: [{ id: 1, authName: '用户管理', icon: 'icon-menu', children: [{ id: 11, authName: '用户项目1', path: '/menu/one', rights: ['view', 'edit', 'add'] }, { id: 12, authName: '用户项目2', path: '/menu/two', rights: ['view', 'edit', 'add', 'delete'] }] }, { id: 2, authName: '用户权限', icon: 'icon-menu', children: [{ id: 22, authName: '权限项目1', path: '/menu/three', rights: ['view', 'edit', 'add', 'delete'] }] }, { id: 3, authName: '用户信息', icon: 'icon-menu' }, ] */ leftMenus: [{ id: 1, title: '用户管理', key: '/user', name: 'user', icon: 'el-icon-user-solid', rights: ['view', 'edit', 'add', 'delete'] }, { id: 2, title: '商品管理', key: '/products', name: 'products', icon: 'el-icon-s-goods', children: [{ id: 21, title: '品类管理', key: '/category', name: 'category', icon: 'bars', rights: ['view', 'edit', 'add', 'delete'] }, { id: 22, title: '商品生产', key: '/product', name: 'product', icon: 'tool', rights: ['view', 'edit', 'add', 'delete'] } ] }, { id: 3, title: '角色管理', key: '/role', name: 'role', icon: 'el-icon-s-custom', rights: ['view', 'edit', 'add', 'delete'] }, { id: 4, title: '图形图表', key: '/charts', name: 'charts', icon: 'el-icon-s-platform', children: [{ id: 41, title: '柱线图', key: '/charts/bar', name: 'bar', icon: 'el-icon-s-data', rights: ['view', 'edit', 'add', 'delete'] }, { id: 42, title: '折线图', key: '/charts/line', name: 'line', icon: 'el-icon-s-marketing', rights: ['view', 'edit', 'add', 'delete'] }, { id: 43, title: '饼图', key: '/charts/pie', name: 'pie', icon: 'el-icon-s-help', rights: ['view', 'edit', 'add', 'delete'] }, ] } ] }]头部布局
{{item.name}} {{user.username}} 设置 退出
methods: { ...mapMutations(["getslideMenus"]), handleSelect(key, keyPath) { this.user.navBar.active = key; let item = this.user.navBar.list[this.user.navBar.active]; console.log(key, keyPath); this.getslideMenus(item.leftMenus); this.$router.push({ name:item.leftMenus[0].name }) if (key == '0') { this.$router.push({ name:'welcome' }) } }, collapse() { this.isCollapseq = !this.isCollapseq; this.$bus.$emit("collapseaside", this.isCollapseq); }, }, mounted() { let item = this.user.navBar.list[this.user.navBar.active] this.getslideMenus(item.leftMenus) }, computed: { ...mapState(['user']) }vuex
export default new Vuex.Store({ state: { bread: [], slideMenus:[], user: JSON.parse(window.sessionStorage.getItem('rightlist')) || {} }, mutations: { addBread(state,preload) { state.bread = preload }, getslideMenus(state,preload){ state.slideMenus = preload }, getLogin(state, preload) { state.user = preload window.sessionStorage.setItem('rightlist', JSON.stringify(preload)) } }, getters: { }, actions: {}})Home.vue
methods: { ...mapMutations(["addBread"]), /* 面包屑导航 */ getbreadcrumb() { let getobj = this.$route.matched.filter((v) => v.name); console.log(getobj); let arr = []; getobj.forEach((v) => { if (v.name == "welcome" || v.name == "Home") { return; } arr.push({ name: v.name, path: v.path, title: v.meta.title, }); /* 多级导航 */ this.slideMenus.forEach((item) => { console.log(item); if (item.children) { item.children.filter((i) => i.key == v.path).length > 0 ? arr.unshift({ title: item.title }) : arr; } }); }); if (arr.length > 0) { arr.unshift({ name: "Home", path: "/", title: "后台首页", }); } this.bran = arr; this.addBread(this.bran); }, },HomeLeft添加个样式判断
加个路由
import User2 from '../views/User2.vue' { path: '/user2', name:'user2', meta:{title:'用户管理2'}, component: User2 },现在：
到此，关于"element怎么实现二级菜单和顶部导航联动"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！
管理
用户
商品
线图
导航
顶部
菜单
商品生产
品类
图形
图表
数据
订单
学习
生产
数据结构
结构
项目
更多
权限
数据库的安全要保护哪些东西
数据库安全各自的含义是什么
生产安全数据库录入
数据库的安全性及管理
数据库安全策略包含哪些
海淀数据库安全审计系统
建立农村房屋安全信息数据库
易用的数据库客户端支持安全管理
连接数据库失败ssl安全错误
数据库的锁怎样保障安全
供电公司网络安全防护网
中国学术期刊全球数据库
网络安全法规定违法所得金额
用友t6如何指向服务器
无锡进口软件开发平台
软件开发包括网站开发吗
服务器如何放开所有端口
儿童网络安全水粉画
初中网络安全注意事项
时代星云软件开发经理
数据库如何查询子查询内
安全的数据库客户端工具
怎么使用数据库管理员权限
信息资源共享及网络安全总结
大唐移动软件开发工程师
华为云服务器和华为云空间
郑州软件开发人员绩效工资
智能软件开发订制
网络安全一路随行寄语
宁夏三维土地资产管理软件开发
最近网络安全的事
安卓 dlna服务器
凌云兄弟网络技术有限公司
异闻录下载软件开发
软件开发行业风险与对策
网络安全问卷怎么发现
手机我的世界怎么创服务器
lol服务器的代码
网络安全风险报告范文
空间信息网络安全a股
