权限管理02-前台左侧菜单栏实现(根据用户获取菜单树)

实现技术：vue+element-ui

1 后台管理主页布局

<template>
  <div class="home">
    <el-container style="height: 920px">
      <!-- 头部 -->
      <el-header>
        Header
      </el-header>
      <el-container>
        <!-- 左侧菜单栏 -->
        <el-aside width="200px">
          LEFT-MENU
        </el-aside>
        <el-main>
          <!-- 主体 -->
          BODY
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

</script>

<style>
.el-header {
  background-color: #b3c0d1;
}

.el-aside {
  background-color: #d3dce6;
}

.el-main {
  background-color: #e9eef3;
}
</style>

a 布局的效果

b 完善左侧菜单栏静态效果

 (1)准备静态页面所需要的代码

        <!-- 左侧菜单栏 -->
          <el-menu>
            <!-- 系统管理 -->
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>系统管理</span>
              </template>

              <!-- 用户管理 -->
              <el-submenu index="1-1">
                <template slot="title">
                  <i class="el-icon-user"></i>
                  <span>用户管理</span>
                </template>
                <el-menu-item index="1-1-1">用户列表</el-menu-item>
                <el-menu-item index="1-1-2">添加用户</el-menu-item>
              </el-submenu>

              <!-- 角色管理 -->
              <el-submenu index="1-2">
                <template slot="title">
                  <i class="el-icon-user-solid"></i>
                  <span>角色管理</span>
                </template>
                <el-menu-item index="1-2-1">角色列表</el-menu-item>
                <el-menu-item index="1-2-2">添加角色</el-menu-item>
              </el-submenu>

              <!-- 菜单管理 -->
              <el-submenu index="1-3">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>菜单管理</span>
                </template>
                <el-menu-item index="1-3-1">菜单列表</el-menu-item>
                <el-menu-item index="1-3-2">添加菜单</el-menu-item>
              </el-submenu>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-news"></i>
                <span>商品管理</span>
              </template>

              <el-submenu index="2-1">
                <template slot="title">
                  <i class="el-icon-open"></i>
                  <span>分类管理</span>
                </template>
                <el-menu-item index="2-1-1">分类列表</el-menu-item>
                <el-menu-item index="2-1-2">添加分类</el-menu-item>
              </el-submenu>

              <el-submenu index="2-2">
                <template slot="title">
                  <i class="el-icon-crop"></i>
                  <span>商品管理</span>
                </template>
                <el-menu-item index="2-2-1">商品列表</el-menu-item>
                <el-menu-item index="2-2-2">添加商品</el-menu-item>
              </el-submenu>
            </el-submenu>
          </el-menu>

(2)左侧菜单栏效果

 

2 后台模拟数据

如果没有子菜单，json中不能包含child元素

[
        {
          id: 11414853796957392896,
          parentId: null,
          name: "系统管理",
          url: null,
          icon: "el-icon-setting",
          order: 1,
          child: [
            {
              id: 11414855218381852672,
              parentId: 11414853796957392896,
              name: "用户管理",
              url: "/sys/user/list",
              icon: "el-icon-user",
              order: 1,
              child: [
                {
                  id: 11414855218381111111,
                  parentId: 11414855218381852672,
                  name: "添加用户",
                  url: "/sys/user/add",
                  icon: null,
                  order: 1,
                },
                {
                  id: 11414855218382222222,
                  parentId: 11414855218381852672,
                  name: "修改用户",
                  url: "/sys/user/edit",
                  icon: null,
                  order: 2,
                },
              ],
            },
            {
              id: 11414855552403640320,
              parentId: 11414853796957392896,
              name: "角色管理",
              url: "/sys/role/list",
              icon: "el-icon-user-solid",
              order: 2
            },
            {
              id: 11414856732403961856,
              parentId: 11414853796957392896,
              name: "菜单管理",
              url: "/sys/menu/list",
              icon: "el-icon-menu",
              order: 3
            },
          ],
        },
        {
          id: 11414854869961019392,
          parentId: null,
          name: "商城管理",
          url: null,
          icon: "el-icon-potato-strips",
          order: 2,
          child: [
            {
              id: 11414855961411194880,
              parentId: 11414854869961019392,
              name: "分类管理",
              url: "/shop/type/list",
              icon: "el-icon-crop",
              order: 1
            },
            {
              id: 11414856386973667328,
              parentId: 11414854869961019392,
              name: "商品管理",
              url: "/shop/brand/list",
              icon: "el-icon-news",
              order: 2
            },
            {
              id: 11414858608033796096,
              parentId: 11414854869961019392,
              name: "上架商品",
              url: "/shop/brand/up/list",
              icon: "el-icon-open",
              order: 3
            },
          ],
        },
      ]

3 迭代菜单树实现左侧菜单栏

在Home.vue中加入菜单树组件

<!-- 左侧菜单栏 -->
<el-menu>
      <!-- 引入菜单树组件 -->
      <menu-tree :menuData="menuData"></menu-tree>
</el-menu>


<script>
import MenuTree from '../components/MenuTree.vue'

export default {
   components: {
    MenuTree
  },
  data() {
    return {
   
    };
  },
};
</script>

新建components/MenuTree.vue组件

<template>
  <div>
    <template v-for="menu in this.menuData">
      <el-submenu :key="menu.id+''" :index="menu.id+''" v-if="menu.child">
          <template slot="title">
              <i :class="menu.icon"></i>
              <span slot="title">{{menu.name}}</span>
          </template>
          <menu-tree :menuData="menu.child"></menu-tree>
      </el-submenu>
      <el-menu-item :key="menu.id+''" :index="menu.id+''" v-else>
          <i :class="menu.icon"></i>
          <span slot="title">{{menu.name}}</span>
      </el-menu-item>
    </template>
  </div>
</template>
 
<script>
export default {
  props: ['menuData'],
  name: 'MenuTree'
}
</script>

实现效果

4 实现点击左侧菜单，路由跳转

在遍历el-menu-item时，在MenuTree.vue文件中，添加上如下代码即可

@click="$router.push({path: menu.url})"