溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
效果如下所示：
項目需要動態生成面包屑導航,并且首頁可以點擊.其余為路徑顯示
<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>
父組件中取到子組件傳過來的值后,直接渲染就行了
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
