拼团小程序怎么开发_vue+elementUI动态生成面包屑导

vue+elementUI动态生成面包屑导航教程     shying   今天小编就为大家分享一篇vue+elementUI动态生成面包屑导航教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

效果如下所示:

项目需要动态生成面包屑导航,并且首页可以点击.其余为路径显示

 el-menu :unique-opened="true" router :default-active="$route.path" @select="handleSelect" 
 div 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()
}

上面的代码是模拟的数据,,可以自行打印

 el-breadcrumb separator- 
 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 

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




扫描二维码分享到微信