element 导航菜单和面包屑(2021年11月更新)

效果类似如下：

导航菜单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.path">
      <!-- 无子菜单的 -->
      <el-menu-item v-if="!menu.child" :index="menu.path">
      	<template v-slot:title>
	      <i :class="menu.icon"></i>
	      <span slot="title">{{menu.name}}</span>
        </template>
      </el-menu-item>
      <!-- 有子菜单的 -->
      <el-submenu v-if="menu.child" :index="menu.path">
        <template v-slot:title>
          <i :class="menu.icon"></i>
          <span slot="title">{{menu.name}}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="subMenu in menu.child" :key="subMenu.path"
            :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: '/useList' }">首页</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: [
      {
        name: '应用管理',
        icon: 'el-icon-shopping-bag-2',
        path: '/useList',
        child: [{
	         name: '非税',
	         path: '/useList/nontax'
	       },{
	         name: '新增应用',
	         path: '/useList/addUse'
	       }]
        }, 
        {
        name: '角色管理',
        icon: 'el-icon-s-custom',
        path: '#2'
      }, {
        name: '权限管理',
        icon: 'el-icon-lock',
        path: '#3'
      }]
    }
  },
  watch: {
  	// 监听路由的改变(实时改变面包屑数据)
    $route () {
      this.breadcrumbList()
    }
  },
  computed: {
  	// 获取路由,（监听菜单的改变）
    defaultActive() {
      // console.log(this.$route.path)
      if(this.$route.path == '/useList') {
        return '/useList/nontax'
      }
      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()
  }
}