element 导航菜单和面包屑

效果类似如下所示：

导航菜单html代码

elementUI组件的样式,根据项目需要做了修改,搬运的时候根据项目自己改改

<el-menu :default-active="defaultActive" router unique-opened active-text-color="#ffd04b" @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"> <template v-slot:title> <icon :class="menu.icon"></icon> <span slot="title">{{menu.name}}</span> </template> </el-menu-item> <!-- 有子菜单的 --> <el-submenu v-if="menu.child" :index="menu.path"> <template v-slot:title> <icon :class="menu.icon"></icon> <span slot="title">{{menu.name}}</span> </template> <el-menu-item-group> <el-menu-item v-for="subMenu in menu.child" :key="subMenu.id" :index="subMenu.path">{{subMenu.name}}</el-menu-item> </el-menu-item-group> </el-submenu> </div> </el-menu>

面包屑html

<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item v-for="o in breadcrumbListData" :key="o.id">{{o.name}} </el-breadcrumb-item> </el-breadcrumb>

js代码

export default { data () { return { activeMenu: '', indexBreadcrumbs: [], breadcrumbListData:[] // 数据 menus: [ { id: '1', name: '应用管理', icon: 'el-icon-shopping-bag-2', path: '#2', child: [{ id: '1-1', name: '交罚', path: '/home' }, { id: '1-2', name: '非税', path: '/nontax' }, { id: '1-3', name: '财政支付', path: '/financialpayment' }, { id: '1-4', name: '新增应用', path: '/addUse' }] }, { id: '2', name: '角色管理', icon: 'el-icon-s-custom', path: '#3' }, { id: '3', name: '权限管理', icon: 'el-icon-lock', path: '#4' }, { id: '4', name: '附加', icon: 'el-icon-paperclip', path: '#5' }] } }, watch: { // 监听路由的改变(实时改变面包屑数据) $route () { this.breadcrumbList() } }, computed: { // 获取路由,（监听菜单的改变） defaultActive() { // console.log(this.$route.path) if(this.$route.path == '/index') { return '/home' } return this.$route.path } }, methods: { // 获取选中的菜单的数据 handleSelect (index, indexPath) { this.indexBreadcrumbs = indexPath // indexPath为一个数组，里面包含选中的菜单，和菜单的index标识 }, // 获取面包屑数据(将选中菜单的数据进行处理,得到面包屑的数据) 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; } } }) this.breadcrumbListData = breadcrumbs // 返回的一个数组，里面只包含选中的菜单 }, }, created () { this.breadcrumbList() } }