vue+elementUI动态生成面包屑导航教程
效果如下所示:
创新互联建站专注于企业营销型网站、网站重做改版、海兴网站定制设计、自适应品牌网站建设、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传给父组件,
首页 {{o.name}}
父组件中取到子组件传过来的值后,直接渲染就行了
当前题目:vue+elementUI动态生成面包屑导航教程
转载源于:http://pwwzsj.com/article/pjjicd.html