VUE-Element组件（二）NavMenu导航菜单

爱被打了一巴掌 2023-07-24 03:29 403阅读 0赞

标签介绍：el-menu为导航菜单组件，el-menu-item表示无子菜单的菜单项，el-submenu表示有子菜单的菜单项。注意el-menu-item和el-submenu最好都加上index标签，标志唯一性，否则会出现展开一个菜单所有的菜单都展开或者收缩一个菜单所有的菜单都收缩的问题。

一、使用NavMenu做为导航菜单，实现的不好会出现点击菜单跳转到新页面的情况。如果想要实现本页跳转，可以参考以下步骤：

1、菜单导航页的路由需要做为其他菜单页的父级路由。如菜单导航页为index.vue，现有用户页user.vue，这个user和index的文件目录没有任何要求，但user的路由需要是index的子路由，如index路由为/index，user路由为/user，是不可以的，此时user的路由需要是/index/...，如下是我的路由实例：

{
        path: '/menu',
        name: 'menu',
        hidden:true,
        component: () => import('@/views/menu/index'),
        children: [
          //给菜单页一个默认的菜单显示
          {
            path: '/user',
            redirect: 'user'
          },
         
          {
            path: '/menu/user',
            name: 'user',
            component: () => import('@/views/menu/user')
          },
           {
            path: '/menu/role',
            name: 'role',
            component: () => import('@/views/menu/role')
          },
        ]
      }

同样的，菜单页里面如果再进行跳转（如我的/menu/user是一个用户列表，点击列表的详情按钮跳转到详情页） ，并且希望详情页也显示侧边的导航菜单，这个详情页就需要是导航页的子路由：

{
        path: '/menu',
        name: 'menu',
        hidden:true,
        component: () => import('@/views/menu/index'),
        children: [
          //给菜单页一个默认的菜单显示
          {
            path: '/user',
            redirect: 'user'
          },
         
          {
            path: '/menu/user',
            name: 'user',
            component: () => import('@/views/menu/user')
          },
          {
            path: '/menu/user/detail',
            name: '用户详情页',
            component: () => import('@/views/menu/user/detail/index')
          },
           {
            path: '/menu/role',
            name: 'role',
            component: () => import('@/views/menu/role')
          },
        ]
      }

2、el-menu菜单组件标签加上如下配置： :default-active="$route.path"和router，开启路由；

<el-menu
                :default-active="$route.path"
                router
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
              >

3、需要跳转的菜单el-menu-item标签上index使用路由表示，如

<el-menu-item index="/menu/user/index">            
          用户管理
      
        
    </el-menu-item>

4、菜单导航页使用<router-view></router-view>做为每个页面的显示部分，也即index跳转的页面。

二、固定菜单实例：

1、效果：访问系统判断是否已登录，未登录则跳转到登录页，已登录则进入中间页（额外插入的功能，测试navbar做导航），从中间页可以进入首页。

（1）登录页：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70][]

（2）登录成功跳转到中间页：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 1][]

（3）点击其他菜单试试：

![20200815102105390.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 2][]

（4）点击第一个菜单页里面的按钮“点击跳转”，这个才是我插入navbar测试页之前的主页，这里的菜单权限是从后台配置的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 3][]

2、代码：

（1）route路由：

import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    /* Layout */
    import Layout from '../views/layout/Layout'
    
    export const constantRouterMap = [
      { path: '/404', component: () => import('@/views/404'), hidden: true },
      { path: '/login', component: () => import('@/views/login/index'), hidden: true },
      {
        path: '/midtest',
        name: 'midtest',
        hidden:true,
        component: () => import('@/views/midtest/index'),
        children: [
          {
            path: '/midtest',
            redirect: 'midtest1'
          },
         
          {
            path: '/midtest/midtest1',
            name: 'midtest1',
            component: () => import('@/views/midtest/midtest1')
          },
          {
            path: 'midtest2',
            name: 'midtest2',
            component: () => import('@/views/midtest/midtest2')
          },
          {
            path: 'midtest3',
            name: 'midtest3',
            component: () => import('@/views/midtest/midtest3')
    
          },
          {
            path: 'midtest41',
            name: 'midtest41',
            component: () => import('@/views/midtest/midtest4/midtest41')
    
          },
          {
            path: 'midtest42',
            name: 'midtest42',
            component: () => import('@/views/midtest/midtest4/midtest42')
    
          },
          {
            path: 'midtest51',
            name: 'midtest51',
            component: () => import('@/views/midtest/midtest5/midtest51')
    
          },
          {
            path: 'midtest521',
            name: 'midtest521',
            component: () => import('@/views/midtest/midtest5/midtest521')
    
          },
          {
            path: 'midtest522',
            name: 'midtest522',
            component: () => import('@/views/midtest/midtest5/midtest522')
    
          }
        ]
      },
      {
        path: '/',
        component: Layout,
        redirect: '/dashboard',
        name: '首页',
        icon: '首页',
        hidden: true,
        children: [{
          path: '/dashboard',
          component: () => import('@/views/dashboard/index')
        }]
      }
    ]
    /**
    * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
    * alwaysShow: true               if set true, will always show the root menu, whatever its child routes length
    *                                if not set alwaysShow, only more than one route under the children
    *                                it will becomes nested mode, otherwise not show the root menu
    * redirect: noredirect           if `redirect:noredirect` will no redirct in the breadcrumb
    * name:'router-name'             the name is used by <keep-alive> (must set!!!)
    * meta : {
        title: 'title'               the name show in submenu and breadcrumb (recommend set)
        icon: 'svg-name'             the icon show in the sidebar,
      }
    **/
    export const asyncRouterMap = [
      // { path: '/login', component: () => import('@/views/login/index'), hidden: true },
      {
        path: '/roleManage',
        redirct: '/roleManage/index',
        name: 'roleManage',
        component: Layout,
        meta: { title: '角色管理', authority: ['role_manage'] },
        noDropdown: true,
        children: [
          {
            path: 'index',
            name: 'index',
            component: () => import('@/views/roleManage/index'),
            meta: { title: '首页', authority: ['role_manage'], keepAlive: false }
          },
          {
            path: 'detail',
            name: 'detail',
            // hidden: true,
            component: () => import('@/views/roleManage/detail'),
            meta: { title: '详情', authority: ['role_manage'], keepAlive: false }
          }
        ]
      },
      //echarts
      {
        path: '/myecharts',
        redirct: '/myecharts/index',
        name: 'myecharts',
        component: Layout,
        meta: { title: 'myecharts', authority: ['role_manage'] },
        noDropdown: true,
        children: [
          {
            path: 'myecharts',
            name: 'myecharts',
            component: () => import('@/views/myecharts/index'),
            meta: { title: 'myecharts', authority: ['role_manage'], keepAlive: false }
          }
         
        ]
      },
      //watermark
      {
        path: '/watermark',
        redirct: '/watermark/index',
        name: 'watermark',
        component: Layout,
        meta: { title: 'watermark', authority: ['role_manage'] },
        noDropdown: true,
        children: [
          {
            path: 'watermark',
            name: 'watermark',
            component: () => import('@/views/watermark/index'),
            meta: { title: 'watermark', authority: ['role_manage'], keepAlive: false }
          }
         
        ]
      },
      //timer
      {
        path: '/timer',
        redirct: '/timer/index',
        name: 'timer',
        component: Layout,
        meta: { title: 'timer', authority: ['role_manage'] },
        noDropdown: true,
        children: [
          {
            path: 'timer',
            name: 'timer',
            component: () => import('@/views/timer/index'),
            meta: { title: 'timer', authority: ['role_manage'], keepAlive: false }
          }
         
        ]
      },
      //nav
      {
        path: '/navmenu/index',
        redirct: '/navmenu/index',
        name: 'navmenu',
        component: Layout,
        meta: { title: 'navmenu', authority: ['nav_manage'] },
        noDropdown: true,
        children: [
          {
            path: 'navmenu',
            name: 'navmenu',
            component: () => import('@/views/navmenu/index'),
            meta: { title: 'navmenu', authority: ['nav_manage'], keepAlive: false }
          },
          {
            path: '/navmenu/menu1',
            name: 'menu1',
            hidden:true,
            component: () => import('@/views/navmenu/menu1'),
            meta: { title: 'menu1', authority: ['nav_manage'], keepAlive: false }
          }
         
        ]
      },
      //分页查询
      {
        path: '/userPager',
        redirct: '/pager/userpager',
        name: 'userpager',
        component: Layout,
        meta: { title: '用户分页', authority: ['user_manage'] },
        noDropdown: true,
        children: [
          {
            path: 'index',
            name: 'index',
            component: () => import('@/views/pager/userpager'),
            meta: { title: '用户分页', authority: ['user_manage'], keepAlive: false }
          }
        ]
      },
      //select
      {
        path: '/select',
        redirct: '/select/index',
        name: 'select',
        component: Layout,
        meta: { title: 'select', authority: ['user_manage'] },
        noDropdown: true,
        children: [
          {
            path: 'index',
            name: 'index',
            component: () => import('@/views/select/index'),
            meta: { title: 'select', authority: ['user_manage'], keepAlive: false }
          },
          {
            path: 'user',
            name: 'user',
            component: () => import('@/views/select/user'),
            meta: { title: 'user', authority: ['user_manage'], keepAlive: false }
          },
          {
            path: 'tree',
            name: 'tree',
            component: () => import('@/views/select/tree'),
            meta: { title: 'tree', authority: ['user_manage'], keepAlive: false }
          },
          {
            path: 'treeselect',
            name: 'treeselect',
            component: () => import('@/views/select/treeselect'),
            meta: { title: 'treeselect', authority: ['user_manage'], keepAlive: false }
          }
        ]
      },
      //css
      {
        path: '/add',
        redirct: '/css/add',
        name: 'add',
        component: Layout,
        meta: { title: 'add', authority: ['user_manage'] },
        noDropdown: true,
        children: [
          
          {
            path: 'add1',
            name: 'add1',
            component: () => import('@/views/css/add1'),
            meta: { title: 'add1', authority: ['user_manage'], keepAlive: false }
          },
    
          {
            path: 'addmodel',
            name: 'addmodel',
            component: () => import('@/views/css/addmodel'),
            meta: { title: 'addmodel', authority: ['user_manage'], keepAlive: false }
          },
          {
            path: 'student',
            name: 'student',
            component: () => import('@/views/css/student'),
            meta: { title: 'student', authority: ['user_manage'], keepAlive: false }
          }
        ]
      },
     
    ]
    
    export default new Router({
      // mode: 'history', // 后端支持可开
      scrollBehavior: () => ({ y: 0 }),
      routes: constantRouterMap
    })

（2）权限拦截js：

import { asyncRouterMap, constantRouterMap } from '@/router/index'
    
    /**
     * 通过meta.authority判断是否与当前用户权限匹配
     * @param authorities
     * @param route
     */
    function hasPermission(authorities, route) {
      if (route.meta && route.meta.authority) {
        return authorities.some(authority => route.meta.authority.indexOf(authority) >= 0)
      } else {
        return true
      }
    }
    
    /**
     * 递归过滤异步路由表，返回符合用户角色权限的路由表
     * @param asyncRouterMap
     * @param authorities
     */
    function filterAsyncRouter(asyncRouterMap, authorities) {
      const accessedRouters = asyncRouterMap.filter(route => {
        if (hasPermission(authorities, route)) {
          if (route.children && route.children.length) {
            route.children = filterAsyncRouter(route.children, authorities)
          }
          return true
        }
        return false
      })
      return accessedRouters
    }
    
    const permission = {
      state: {
        routers: constantRouterMap,
        addRouters: []
      },
      mutations: {
        SET_ROUTERS: (state, routers) => {
          state.addRouters = routers
          state.routers = constantRouterMap.concat(routers)
        }
      },
      actions: {
        GenerateRoutes({ commit }, data) {
          return new Promise(resolve => {
            const { authorities } = data
            let accessedRouters
            if (authorities.indexOf('admin') >= 0) {
              accessedRouters = asyncRouterMap
            } else {
              accessedRouters = filterAsyncRouter(asyncRouterMap, authorities)
            }
            commit('SET_ROUTERS', accessedRouters)
            resolve()
          })
        }
      }
    }
    
    export default permission

（3）login.vue:

<template>
    <div class="main">
      <el-card class="loginform">
        <el-form >
          <el-row>
            <el-form-item label="用户名">
              <el-col span="6">
                <el-input v-model="user.userName"></el-input>
              </el-col>
            </el-form-item>
          </el-row>
    
          <el-row>
            <el-form-item label="密码" prop="pass">
    			 <label slot="label">密  码:</label>
              <el-col span="6">
                <el-input v-model="user.password" type="password" auto-complete="off"></el-input>
              </el-col>
            </el-form-item>
          </el-row>
    
          <el-row>
            <el-form-item label="验证码" prop="pass">
              <el-col span="4">
                <el-input v-model="user.code" type="code" auto-complete="off"></el-input>
              </el-col>
              <el-col span="2">
                <el-input v-model="code" readonly="readonly" ></el-input>
              </el-col>
            </el-form-item>
          </el-row>
    
          <el-row >
            <el-col span="6" offset="2">
              <el-form-item size="large">
                <el-button type="primary" @click="login()">登录</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    </template>
    
    
    <script>
    import { login, getCode } from "@/api/login";
    import { getToken, setToken, removeToken } from "@/utils/auth";
    import { getDAes } from '@/utils/crypto';
    export default {
      data() {
        return {
          code: "",
          user: {
            userName: "",
            password: "",
            code: ""
          }
        };
      },
    
      created() {
        this.getCode();
      },
    
      methods: {
        getCode() {
          getCode().then(res => {
            this.code = res.data;
          });
        },
    
        login() {
          this.user.password = getDAes(this.user.password),
          this.$store.dispatch("Login", this.user).then(() => {
            this.$router.push({ path: "/midtest" });
          });
        }
      }
    };
    </script>
    
    
    <style>
    .main{
    	height: 100%;
    	width: 100%;
    	margin: 0 0;
    	background-color: burlywood;
    }
    .loginform {
    	margin-left: 20%;
    	margin-right: 20%;
    	width: 60%;
       
    }
    </style>

（4）navbar菜单页：

![20200815103414865.png][]

<template>
      <div>
        <div>
          <el-row class="tac" style="height:100%">
            <el-col :span="4">
              <el-menu
                :default-active="$route.path"
                router
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
              >
                <el-menu-item index="/midtest/midtest1">
                  <i class="el-icon-menu"></i>
                  <router-link to="/midtest/midtest1">midtest1</router-link>
                </el-menu-item>
                <el-menu-item index="/midtest/midtest2">
                  <i class="el-icon-menu"></i>
                  <router-link to="/midtest/midtest2">midtest2</router-link>
                </el-menu-item>
                <el-menu-item index="/midtest/midtest3">
                  <i class="el-icon-menu"></i>
                  <router-link to="/midtest/midtest3">midtest3</router-link>
                </el-menu-item>
                
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>二级菜单</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/midtest/midtest41">
                      <i class="el-icon-menu"></i>
                      <router-link to="/midtest/midtest41">midtest41</router-link>
                    </el-menu-item>
                    <el-menu-item index="/midtest/midtest42">
                      <i class="el-icon-menu"></i>
                      <router-link to="/midtest/midtest42">midtest42</router-link>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                
                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>三级菜单</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/midtest/midtest51">
                      <i class="el-icon-menu"></i>
                      <router-link to="/midtest/midtest51">midtest51</router-link>
                    </el-menu-item>
    
                    
                    <el-submenu index="3">
                      <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>三级子菜单</span>
                      </template>
                      <el-menu-item-group>
                        <el-menu-item index="/midtest/midtest521">
                          <i class="el-icon-menu"></i>
                          <router-link to="/midtest/midtest521">midtest521</router-link>
                        </el-menu-item>
                        <el-menu-item index="/midtest/midtest522">
                          <i class="el-icon-menu"></i>
                          <router-link to="/midtest/midtest522">midtest522</router-link>
                        </el-menu-item>
                      </el-menu-item-group>
                    </el-submenu>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-col>
            <el-col span="20">
              
              <div class="main">
                <router-view></router-view>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </template>

（5）菜单页：随便看几个：

<template>
        <div>midtest1<el-button type="priamry" @click="goToIndex">点击跳转</el-button></div>
    </template>
    <script>
    export default {
      methods: {
        goToIndex() {
          this.$router.push({ path: "/" });
        },
      },
    };
    </script>
    <style scoped>
    div{
      background-color: white;
    }
    </style>

<template>
        <div>midtest3</div>
    </template>

<template>
        <div class="div">midtest522</div>
    </template>
    <style scoped>
    .div{
        background-color: white;
    }
    </style>

三、navbar菜单权限动态控制：上面的例子中，navbar的菜单权限是写死的，不同角色的用户登进来看到的菜单都是一样的，这里做下动态权限。

1、方法1：在router中控制权限：如现在给midtest2做权限控制：将整个Navbar的router放到asyncRouterMap下，并给midtest2的路由改为：

{
            path: 'midtest2',
            name: 'midtest2',
            meta: { title: 'midtest2', authority: ['role_manage'] },
            component: () => import('@/views/midtest/midtest2')
          }

这样如果某个用户没有role\_manager的权限，点击midtest2会跳转到空白页，但是该用户还是可以看到midtest2的菜单导航。

2、方法2：给navbar菜单导航做权限控制：

（1）、数据库：

配置11个菜单：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 4][]

并给两个用户配置navbar菜单权限：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 5][]

（2）后端代码：

package com.demo.dto;
    
    import java.io.Serializable;
    import java.util.List;
    
    public class NavMenuDTO implements Serializable {
    
        private Integer id;
    
        private String userAccount;
    
        private String menuName;
    
        private String menuIcon;
    
        private String menuUrl;
    
        private Integer menuParentId;
    
        private List<NavMenuDTO> childList;
    
    }

@RequestMapping("/getNavMenu")
        private ResponseMessage getNavMenu(){
            JWTUserDTO jwtUser = (JWTUserDTO) SecurityContextHolder.getContext().getAuthentication().getPrincipal();
            List<NavMenuDTO> menuDTOS = navMenuService.getNavMenu(jwtUser.getUserName());
            return ResponseMessage.success(menuDTOS);
        }

package com.demo.service.impl;
    
    import com.demo.dao.NavMenuDao;
    import com.demo.dto.NavMenuDTO;
    import com.demo.service.NavMenuService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    @Service("navMenuService")
    public class NavMenuServiceImpl implements NavMenuService {
    
        @Autowired
        private NavMenuDao navMenuDao;
    
        @Override
        public List<NavMenuDTO> getNavMenu(String userAccount) {
            //一级菜单
            List<NavMenuDTO> navMenuDTOList = navMenuDao.getNavMenu(userAccount,0);
            //子菜单
            for(NavMenuDTO navMenuDTO : navMenuDTOList){
                //二级菜单
                Integer menuId = navMenuDTO.getId();
                List<NavMenuDTO> secondChildNavList = navMenuDao.getNavMenu(userAccount,menuId);
                navMenuDTO.setChildList(secondChildNavList);
                //三级菜单
                for(NavMenuDTO secondChild : secondChildNavList){
                    Integer secondMenuId = secondChild.getId();
                    List<NavMenuDTO> thirdChildNavList = navMenuDao.getNavMenu(userAccount,secondMenuId);
                    secondChild.setChildList(thirdChildNavList);
                }
            }
            return navMenuDTOList;
        }
    }

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.demo.dao.NavMenuDao">
    
     <select id="getNavMenu" resultType="com.demo.dto.NavMenuDTO">
         select
         nm.id,
         nm.menu_name menuName,
         nm.menu_icon menuIcon,
         nm.menu_url menuUrl,
         nmu.user_account userAccount
         from navbar_menu nm
         left join navbar_menu_user nmu on nm.id = nmu.navbar_menu_id
         where nmu.user_account = #{userAccount}
         and nm.menu_parent_id = #{parentId}
     </select>
    </mapper>

（3）前端代码：

登录成功后调用getNavMenu接口从后台获取navbar菜单列表，存储到store中，改造下上面例子中的index菜单页代码：

<template>
      <div>
        <div>
          <el-row class="tac" style="height:100%">
            <el-col :span="4">
              <el-menu
                :default-active="$route.path"
                router
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
              >
                <div v-for="item in navbars" :key="item.id">
                  
                  <el-menu-item :index="item.menuUrl" v-if="item.childList.length === 0">
                    <i :class="item.menuIcon"></i>
                    <router-link :to="item.menuUrl">{
       {item.menuName}}</router-link>
                  </el-menu-item>
                  
                  <el-submenu v-if="item.childList.length > 0">
                    <template slot="title">
                      <i :class="item.menuIcon"></i>
                      <span>{
       {item.menuName}}</span>
                    </template>
                    
                    <div v-for="second in item.childList" :key="second.id">
                      
                      <el-menu-item :index="second.menuUrl" v-if="second.childList.length === 0">
                        <i :class="second.menuIcon"></i>
                        <router-link :to="second.menuUrl">{
       {second.menuName}}</router-link>
                      </el-menu-item>
                      
                      <el-submenu v-if="second.childList.length > 0">
                        <template slot="title">
                          <i :class="second.menuIcon"></i>
                          <span>{
       {second.menuName}}</span>
                        </template>
                        <el-menu-item :index="third.menuUrl"  v-for="third in second.childList" :key="third.id">
                          <i :class="third.menuIcon"></i>
                          <router-link :to="third.menuUrl">{
       {third.menuName}}</router-link>
                        </el-menu-item>
                      </el-submenu>
                    </div>
                  </el-submenu>
                </div>
              </el-menu>
            </el-col>
            <el-col span="20">
              
              <div class="main">
                <router-view></router-view>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </template>
    <script>
    import { mapGetters } from "vuex";
    
    export default {
      name: "index",
      created() {},
      computed: {
        ...mapGetters(["navbars"]),
      },
    };
    </script>
    
    <style rel="stylesheet/scss" lang="scss" scoped>
    .dashboard {
      &-container {
        margin: 30px;
      }
      &-text {
        font-size: 30px;
        line-height: 46px;
      }
    }
    </style>

这里最多有三级菜单，如果菜单级别比较多，写在一个文件里比较复杂，可以封装成子组件调用，子组件里再调用组件自己，形成递归。

看下效果：先是zhangsan登录：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 6][]

再退出切换成lisi登录：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 7][]

四、样式问题：

1、菜单选中高亮显示：两个步骤：

1）、<el-menu>标签加上颜色：text-color表示未选中的颜色， active-text-color表示当前选中的菜单的颜色

text-color="black"
           active-text-color="#ffd04b"

2）、需要高亮显示的内容放在 <el-menu-item> </el-menu-item> 标签中，且不要自定义样式，否则原样式会被覆盖。如我想给菜单文字设置大小，以下会失去显示高亮功能：

<el-menu-item :index="third.menuUrl"
                        v-for="third in second.childList"
                        :key="third.id"             
                         >
                        <i :class="third.menuIcon"></i>
                        <span class="mini-menuname">{
       {third.menuName}}</span>
                      </el-menu-item>
    
    
    
    .mini-menuname {
        color: black;
        font-size: 10px;
      }

可以把样式加在外层的<el-menu-item>上，这样：

<el-menu-item :index="third.menuUrl"
                        v-for="third in second.childList"
                        :key="third.id"  
                        class="mini-menuname"           
                         >
                        <i :class="third.menuIcon"></i>
                        {
       {third.menuName}}
                      </el-menu-item>
    
    
    
    .mini-menuname {
        color: black;
        font-size: 10px;
      }

2、更改导航栏被选中项的背景颜色：

.el-menu-item.is-active \{  
   background-color: rgb(231, 235, 240) !important;  
\}

这时自定义背景颜色的权重大于element.style，样式便可覆盖。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70]: /images/20230528/11c04d910d164ac380dbb3a909753883.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 1]: /images/20230528/610d65c7443c4bf49348ad9934ad4df4.png
[20200815102105390.png]: /images/20230528/42841626e9f84e21ad8f4e73ddd07e77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 2]: /images/20230528/dae96a648b4d4d93bfbc1cccec68d297.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 3]: /images/20230528/744c8944f3234f2683f991572de6c4c8.png
[20200815103414865.png]: /images/20230528/e481fc6db7364927aa1beadf3cd4be21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 4]: /images/20230528/f7b1498ed32c44fba0004f70319db512.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 5]: /images/20230528/ea6a72bba75c46059179152fde344587.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 6]: /images/20230528/7e8ef510974842dda1f26ebbd8535a0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 7]: /images/20230528/d057774e1b474554b4eec03f00ef7150.png