效果如下所示：
创新互联建站专注于企业营销型网站、网站重做改版、海兴网站定制设计、自适应品牌网站建设、html5、商城开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为海兴等各大城市提供网站开发制作服务。
项目需要动态生成面包屑导航,并且首页可以点击.其余为路径显示
上面的代码是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传给父组件,
父组件中取到子组件传过来的值后,直接渲染就行了
网页题目：vue+elementUI动态生成面包屑导航教程
文章分享：
http://cdkjz.cn/article/pjjicd.html
