VUE+elementUI递归实现动态路由多级菜单

最新推荐文章于 2024-07-24 14:58:19 发布

New924

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量1.2k

点赞数 1

分类专栏： VUE 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/New924/article/details/129156435

版权

VUE 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

01：在路由文件设置路由信息（index.js文件）

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  // mode:history,
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      hidden: true,
      component: () => import('@/components/HelloWorld')//路由懒加载
    },
    {
      path: '/Login',
      name: 'Login',
      hidden: true,
      component: () => import('@/components/Login')
    },
    {
      path: '*',
      name: '404',
      hidden: true,
      component: () => import('@/components/404')
    },
    {
      path: '/home',
      name: '学生管理',
      menuType:'1',
      iconClass: 'fa fa-address-book-o',
      // redirect: '/home/student',
      component: () => import('@/components/home'),
      children: [
        {
          path: '/home/student',
          name: '学生列表',
          menuType:'2',
          component: () => import('@/components/student/StudentInfo')
        },
        {
          path: '/home/ceshi',
          name: '测试',
          menuType:'1',
          component: () => import('@/components/student/StudentInfo'),
          children: [
            {
                path: '/home/ceshicaidan',
                name: '测试下的菜单',
                menuType:'2',
                component: () => import('@/components/student/StudentInfo')
            }
          ]
        },
      ]
    },
    {
      path: '/dataAnalysis',
      name: '数据分析',
      menuType:'2',
      iconClass: 'fa fa-bar-chart'
      // component: ()=>import('@/components/dataAnalysis')
    },
    {
      path: '/users',
      name: '用户中心',
      menuType:'1',
      iconClass: 'fa fa-user-circle-o',
      component: () => import('@/components/home'),
      children: [
        {
          path: '/users/user',
          name: '用户列表',
          menuType:'2',
          component: () => import('@/components/user/user')
        },
      ]
    },
  ]
})

02：左侧菜单父组件（Menu.vue）

<template>
    <div class="menu">
        <el-aside class="aside" width="240px">
            <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
                active-text-color="#ffd04b">
                <MenuRouter v-for="item in menus" :key="item.path" :item="item" v-if="!item.hidden"/>                    
            </el-menu>
        </el-aside>
</div>
</template>
<script>
import MenuRouter from '../common/MenuRouter.vue'
export default {
    components: { MenuRouter },
    data() {
        return {
            menus:[]
        }
    },
    created(){
        this.menus = [...this.$router.options.routes]  //得到路由信息，就是index.js文件里面的路由信息可以打看查看
        console.log(this.menus);
    }
}
</script>
<style scoped>
.menu {
    height: 100%;
    /* width:240px; */
    overflow: hidden;
}

.aside {
    height: 100%;
    overflow: hidden;
}

.el-menu-vertical-demo {
    height: 100%;
}

/* 设置左边导航栏和顶部菜单不对齐的方法 */
.el-menu {
    border-right-width: 0;
}

span {
    margin-left: 4px;
}
</style>

03: 左侧菜单子组件（MenuRouter.vue)

<template>
    <div>
        <el-submenu :key="item.path" :index="item.path" v-if="item.children">
            <template slot="title">
                <i :class="item.iconClass"></i>
                <span>{{ item.name }}</span>
            </template>
            <MenuRouter v-for="child in item.children" :key="child.path" :item="child">
            </MenuRouter>
        </el-submenu>

        <el-menu-item :index="item.path" v-else> 
            <i :class="item.iconClass"></i>
            <span slot="title">{{ item.name }}</span>
        </el-menu-item>
</div>
</template>

<script>

export default {
    name: 'MenuRouter',
    props:{
        item:{
            type:Object,
            default:()=>{}
        }
    },
    data() {
        return {
        }
    },
}

</script>