效果如下所示:
项目需要动态生成面包屑导航,并且首页可以点击.其余为路径显示
<el-menu :unique-opened="true" router :default-active="$route.path" @select="handleSelect"> <div class="user-menu-box" v-for="menu in menus" :key="menu.id"> <el-menu-item v-if="!menu.child" :index="menu.path"> <icon :name="menu.icon" :w="20" :h="20"></icon> <span slot="title" v-text="menu.name"></span> </el-menu-item> <el-submenu v-if="menu.child" :index="menu.path"> <template slot="title"> <icon :name="menu.icon" :w="20" :h="20"></icon> <span slot="title" v-text="menu.name"></span> </template> <el-menu-item-group> <el-menu-item v-for="subMenu in menu.child" :key="subMenu.id" v-text="subMenu.name" :index="subMenu.path"></el-menu-item> </el-menu-item-group> </el-submenu> </div> </el-menu>
上面的代码是elementUI组件的样式,根据项目需要做了修改,搬运的时候根据项目自己改改
export default { 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 () { let breadcrumbs = [] let menuList = this.menus this.indexBreadcrumbs.map(item => { for (let i = 0; i < menuList.length; i++) { if (item === menuList[i].path) { breadcrumbs.push(menuList[i]) if (menuList[i].child) { menuList = menuList[i].child } break; } } }) return breadcrumbs } }, methods: { handChange () { this.$emit('hand-change', this.breadcrumbList) }, handleSelect (index, indexPath) { this.indexBreadcrumbs = indexPath } }, created () { this.handChange() } }
上面的代码是模拟的数据,调用elememtUI的组件导航菜单的中的@select方法,有两个参数,可以自行打印
然后在computed中计算当前选中的是哪一部分,取到返回值,然后$emit传给父组件,
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/backstage' }">首页</el-breadcrumb-item> <el-breadcrumb-item v-for="o in breadcrumbList" :key="o.id">{{o.name}} </el-breadcrumb-item> </el-breadcrumb>
父组件中取到子组件传过来的值后,直接渲染就行了
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]