Vue动态菜单,面包屑

vue动态路由渲染菜单

实现效果：

准备数据：mock/index.json

“menuType”: “1”, 菜单

“menuType”: “2”, 按钮

[
  {
    "_id": "600d4075e218daaf4ec77e52",
    "menuType": "1",
    "menuName": "系统管理",
    "path": "/system",
    "icon": "el-icon-setting",
    "children": [
      {
        "_id": "600d525e602f452aaeeffcd9",
        "menuType": "1",
        "menuName": "用户管理",
        "path": "/system/user",
        "children": [
          {
            "_id": "6030ca8f93f0e159c8390f0c",
            "menuType": "2",
            "menuName": "新增",
            "menuCode": "user-create"
          },
          {
            "_id": "603226d9257d15a8c54cf9f8",
            "menuType": "2",
            "menuName": "批量删除",
            "menuCode": "user-delete"
          },
          {
            "_id": "603253e0a821c6bb59084541",
            "menuType": "2",
            "menuName": "查看",
            "menuCode": "user-query"
          }
        ]
      },
      {
        "_id": "601bc4f8a794e23c2e42efa9",
        "menuType": "1",
        "menuName": "菜单管理",
        "path": "/system/menu",
        "children": [
          {
            "_id": "60325400a821c6bb59084543",
            "menuType": "2",
            "menuName": "查看",
            "menuCode": "menu-query"
          },
          {
            "_id": "6032540fa821c6bb59084544",
            "menuType": "2",
            "menuName": "创建",
            "menuCode": "menu-create"
          }
        ]
      }
    ]
  },
  {
    "_id": "601b9eb25929c81a1f988bb0",
    "menuType": "1",
    "menuName": "审批管理",
    "path": "/audit",
    "icon": "el-icon-s-promotion",
    "children": [
      {
        "_id": "601bc763a794e23c2e42efaa",
        "menuType": "1",
        "menuName": "休假申请",
        "path": "/audit/leave",
        "children": [
          {
            "_id": "603254a8a821c6bb59084549",
            "menuType": "2",
            "menuName": "查看",
            "menuCode": "leave-query"
          },
          {
            "_id": "603254baa821c6bb5908454a",
            "menuType": "2",
            "menuName": "申请休假",
            "menuCode": "leave-create"
          }
        ]
      }
    ]
  }
]

Home.vue

<template>
  <div class="home">
    <el-container style="height: 100%; border: 1px solid #eee">
      <!--侧边栏-->
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <!--菜单导航-->
        <el-menu router>
          <TreeMenu :menuData="menuData"></TreeMenu>
        </el-menu>
      </el-aside>
      <!--主题区域-->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>

  </div>
</template>

<script>
import menuData from '../../mock/index.json'
import TreeMenu from "@/components/TreeMenu";
export default {
  name: 'Home',
  components: {TreeMenu},
  data() {
    return {
      menuData
    }
  }

}
</script>

<style lang="scss" scoped>
.home {
  height: 100vh;
}
</style>

TreeMenu.vue

<!--
思路 :
1. 获取传递进来的数据
2. 使用 el-sub-menu 进行一个遍历 , 遍历传递过来的所有数据, 并且判断他是否有 children , 如果有children ,并且 menuType 为 1 的情况
   则使用 munuName 生成一个组
3. 递归判断是否有多级 children , 如果有 则继续生成下一级菜单
4. 判断到最后一个层级 , 如果说 menuType === 1 情况下,name这个肯定是可以 按钮 ,而不是一个组 所以, 这个应该用 el-menu-item 进行渲染

-->
<template>
  <div>
    <template v-for="item in menuData">
      <!--一级菜单渲染-->
      <el-submenu
          :index="item._id"
          v-if="item.children && item.children.length > 0 && item.children[0].menuType.toString() === '1'"
      >
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.menuName }}</span>
        </template>
        <!--递归自己-->
        <TreeMenu :menuData="item.children"></TreeMenu>
      </el-submenu>
      <!--多级菜单-->
      <!--没有孩子，并且不是按钮，就渲染上-->
      <el-menu-item
          v-else-if="item.menuType.toString() === '1'"
          :index="item.path"
          :key="item._id"
      >
        {{item.menuName}}
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: {
    menuData: {
      type: Array,
      required: true
    }
  },
}
</script>

<style lang="scss" scoped>

</style>

Vue动态面包屑

先来了解一下$route里面存储的信息，可以发现matched里面存储了当前路径的路由信息

router->index.js

利用路由元信息标记当前路径的菜单标题

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../components/Home'),
    meta: {
      title: "首页"
    },
    children: [
      {
        path: '/system',
        name: 'system',
        component: () => import('../views/System.vue'),
        meta: {
          title: "系统管理"
        },
        children: [
          {
            path: 'user',
            name: 'user',
            component: () => import('../views/User.vue'),
            meta: {
              title: "用户管理"
            },
          },
          {
            path: 'menu',
            name: 'menu',
            component: () => import('../views/Menu.vue'),
            meta: {
              title: "菜单管理"
            },
          },
        ]
      },
      {
        path: '/audit',
        name: 'audit',
        component: () => import('../views/Audit.vue'),
        meta: {
          title: "审批管理"
        },
        children: [
          {
            path: 'leave',
            name: 'leave',
            component: () => import('../views/Leave.vue'),
            meta: {
              title: "休假管理"
            },
          }
          ]
      }
    ]
  },
]
// 动态，添加的路由
export const dynamicRouters = [
  {
    path: '/test',
    name: 'test',
    component: () => import('../views/Test.vue'),
  },
  {
    path: '/permission',
    name: 'permission',
    component: () => import('../views/Permission'),
  },
]



const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// // 循环遍历路由添加上去
// dynamicRouters.forEach( (item) => {
//   router.addRoute(item)
// })


export default router

Home.vue

<template>
  <div class="home">
    <el-container style="height: 100%; border: 1px solid #eee">
      <!--侧边栏-->
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <!--菜单导航-->
        <el-menu router>
          <TreeMenu :menuData="menuData"></TreeMenu>
        </el-menu>
      </el-aside>
      <!--主题区域-->
      <el-main>
        <!--面包屑-->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: breadCrumbItem.path }" v-for="breadCrumbItem in BreadcrumbList" :key="breadCrumbItem.path">
              {{breadCrumbItem.meta.title}}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <router-view></router-view>
      </el-main>
    </el-container>

  </div>
</template>

<script>
import menuData from '../../mock/index.json'
import TreeMenu from "@/components/TreeMenu";
export default {
  name: 'Home',
  components: {TreeMenu},
  data() {
    return {
      menuData
    }
  },
  computed: {
    BreadcrumbList() {
      return this.$route.matched
    }
  },
  mounted() {
    console.log(this.$route)
  }
}
</script>

<style lang="scss" scoped>
.home {
  height: 100vh;
}
</style>

实现效果