vue+el-menu+vue-router实现动态导航条

最新推荐文章于 2025-04-16 09:36:39 发布

diaobiteng1128

最新推荐文章于 2025-04-16 09:36:39 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/luyuefeng/p/8039020.html

本文介绍了一个使用Vue实现的导航栏组件模板，该组件能够根据路由配置动态展示菜单项，并支持多级菜单展开。通过提供的代码示例，展示了如何定义路由及对应的元信息来控制菜单的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导航栏组件template

<template>
    <div class="sidebar">
        <el-menu unique-opened :default-active="$route.path" class="my-menu" router background-color="#324157" text-color="#fff" >
            <template  v-for="(item , index) in $router.options.routes" v-if="item.meta.menuShow">
                <el-submenu :index="item.path" v-if="item.children && item.children.length > 1">
                    <template slot="title">
                        {{item.meta.menuName}}
                    </template>
                    <el-menu-item v-for="(itemChild , index) in item.children" :index="itemChild.path" :key="index" v-if="itemChild.meta.menuShow">
                        <span>{{itemChild.meta.menuName}}</span>
                    </el-menu-item>
                </el-submenu>
                <el-menu-item :index="item.children[0].path" v-else>
                    {{item.children[0].meta.menuName}}
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

路由文件router/index.js

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router)

export default new Router({
  routes: [
    {
        path: '/',
        redirect: '/login',
        meta: {
            menuShow: false
        }
    },
    {
        path: '/login',
        name: 'login',
        component: Login,
        meta: {
            menuShow: false,
        }
    },
   
    {
        path: '/system',
        name: 'system',
        component: Home,
        meta: {
            menuShow: true,          // 是否在导航栏中显示
            menuName: '系统管理',     // 导航栏中显示的名称 
        },
        children: [
            {
                path: '/system/organization',
                name: 'organization',
                component: Organization,
                meta: {
                    menuShow: true,
                    menuName: '组织架构',
                }
            },
            {
                path: '/system/userManage',
                name: 'userManage',
                component: UserManage,
                meta: {
                    menuShow: true,
                    menuName: '用户管理',
                }
            },
            {
                path: '/system/systemSet',
                name: 'systemSet',
                component: SystemSet,
                meta: {
                    menuShow: true,
                    menuName: '系统设置',
                }
            },
            {
                path: '/system/operationLog',
                name: 'operationLog',
                component: OperationLog,
                meta: {
                    menuShow: true,
                    menuName: '操作日志',
                }
            },
        ]
    },
  ]
})

转载于:https://www.cnblogs.com/luyuefeng/p/8039020.html