vue+elementUI动态生成面包屑导航教程

2023-08-09 21:59:04 84

exportdefault{ data(){ return{ activeMenu:'', indexBreadcrumbs:[], menus:[{ id:'1', name:'门户管理', icon:'menhuguanli', path:'#2', child:[{ id:'1-1', name:'轮播图', path:'/backstage/protaManage/turns' },{ id:'1-2', name:'基础数据', path:'/backstage/protaManage/basis' },{ id:'1-3', name:'分类管理', path:'/backstage/protaManage/classify' },{ id:'1-4', name:'内容发布', path:'/backstage/protaManage/content' }] },{ id:'2', name:'我的云盘', icon:'yunpan', path:'/backstage/yunManage' },{ id:'3', name:'管理菜单', icon:'shezhi', path:'/backstage/menusManage' },{ id:'4', name:'编辑板块', icon:'fabuzhongxin', path:'/backstage/editPlate' }] } }, watch:{ $route(){ this.handChange() } }, computed:{ breadcrumbList(){ letbreadcrumbs=[] letmenuList=this.menus this.indexBreadcrumbs.map(item=>{ for(leti=0;i

上面的代码是模拟的数据,调用elememtUI的组件导航菜单的中的@select方法,有两个参数,可以自行打印

然后在computed中计算当前选中的是哪一部分,取到返回值,然后$emit传给父组件,


首页
{{o.name}}

父组件中取到子组件传过来的值后,直接渲染就行了

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue+elementUI动态生成面包屑导航教程

热门推荐

随机推荐