vuejs3+elementPlus后台管理系统，左侧菜单栏制作，跳转、默认激活菜单

已于 2024-07-11 11:31:32 修改
阅读量626 收藏 2
点赞数 1
分类专栏： # Vue 前端 # 动画 文章标签： vue.js javascript 前端
于 2024-06-20 22:53:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33650655/article/details/139844255
版权
Vue 同时被 3 个专栏收录
7 篇文章 0 订阅
订阅专栏
前端
7 篇文章 0 订阅
订阅专栏
动画
1 篇文章 0 订阅
订阅专栏

默认激活菜单,效果： 

默认激活菜单，效果1：

默认激活菜单，效果2：

跳转链接效果：

制作：

<script setup>
import {useUserStore} from "@/stores/userStore.js";
import {ref} from "vue";

const userStore = useUserStore()
//默认激活菜单
const defaultMenu = ref('/home')
</script>

<template>
  <el-menu
      active-text-color="#409EFF"
      background-color="#32363f"
      :default-active="defaultMenu"
      text-color="#fff"
      @open="handleOpen"
      @close="handleClose"
      router
  >
    <el-sub-menu :index="ind+1" v-for="(menuItem,ind) in userStore.userInfo.menus" :id="menuItem.id">
      <template #title>
        <el-icon>
          <component :is="menuItem.icon"></component>
        </el-icon>
        <span>{{menuItem.name}}</span>
      </template>
      <el-menu-item :index="childItem.frontpath" v-for="(childItem,childInd ) in menuItem.child">
        <template #title>
          <el-icon>
            <component :is="childItem.icon"></component>
          </el-icon>
          <span>{{childItem.name}}</span>
        </template>
      </el-menu-item>

    </el-sub-menu>


  </el-menu>
</template>

<style scoped>

</style>

代码解析，实现路径跳转：

代码解析，默认激活菜单

数据格式：

{
    "status": 200,
    "id": 3,
    "username": "admin",
    "avatar": "http:xxxxxxxxxxx.com/public/642438a225ad5.jpg",
    "super": 1,
    "role": {
        "id": 2,
        "name": "超级管理员"
    },
    "menus": [
        {
            "id": 598,
            "rule_id": 0,
            "status": 1,
            "create_time": "2024-06-11 23:22:32",
            "update_time": "2024-06-19 22:32:52",
            "name": "后台首页",
            "desc": null,
            "frontpath": "",
            "condition": "",
            "menu": 1,
            "order": 1,
            "icon": "House",
            "method": "",
            "child": [
                {
                    "id": 599,
                    "rule_id": 598,
                    "status": 1,
                    "create_time": "2024-06-11 23:24:51",
                    "update_time": "2024-06-19 22:32:55",
                    "name": "后台首页",
                    "desc": null,
                    "frontpath": "/home",
                    "condition": "",
                    "menu": 1,
                    "order": 50,
                    "icon": "AddLocation",
                    "method": "",
                    "child": []
                }
            ]
        },
        {
            "id": 562,
            "rule_id": 0,
            "status": 1,
            "create_time": "2024-05-29 21:18:00",
            "update_time": "2024-06-11 23:19:37",
            "name": "图库管理",
            "desc": null,
            "frontpath": "",
            "condition": "调度",
            "menu": 1,
            "order": 2,
            "icon": "Opportunity",
            "method": "POST",
            "child": [
                {
                    "id": 563,
                    "rule_id": 562,
                    "status": 1,
                    "create_time": "2024-05-29 21:19:18",
                    "update_time": "2024-05-30 14:17:37",
                    "name": "图库管理",
                    "desc": null,
                    "frontpath": "/image/list",
                    "condition": "",
                    "menu": 1,
                    "order": 2,
                    "icon": "PictureFilled",
                    "method": "",
                    "child": [
                        {
                            "id": 571,
                            "rule_id": 563,
                            "status": 1,
                            "create_time": "2024-05-30 14:16:47",
                            "update_time": "2024-05-30 14:16:47",
                            "name": "11",
                            "desc": null,
                            "frontpath": "11",
                            "condition": "",
                            "menu": 1,
                            "order": 50,
                            "icon": "AddLocation",
                            "method": "",
                            "child": [
                                {
                                    "id": 597,
                                    "rule_id": 571,
                                    "status": 1,
                                    "create_time": "2024-06-11 17:06:34",
                                    "update_time": "2024-06-11 17:06:34",
                                    "name": "图库",
                                    "desc": null,
                                    "frontpath": "",
                                    "condition": "",
                                    "menu": 1,
                                    "order": 50,
                                    "icon": "AlarmClock",
                                    "method": "",
                                    "child": []
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "id": 556,
            "rule_id": 0,
            "status": 1,
            "create_time": "2024-05-29 18:35:06",
            "update_time": "2024-05-30 16:45:55",
            "name": "管理员管理",
            "desc": null,
            "frontpath": "",
            "condition": "",
            "menu": 1,
            "order": 3,
            "icon": "Avatar",
            "method": "",
            "child": [
                {
                    "id": 557,
                    "rule_id": 556,
                    "status": 1,
                    "create_time": "2024-05-29 18:36:05",
                    "update_time": "2024-05-30 16:45:54",
                    "name": "管理员管理",
                    "desc": null,
                    "frontpath": "/manager/list",
                    "condition": "",
                    "menu": 1,
                    "order": 50,
                    "icon": "AddLocation",
                    "method": "",
                    "child": []
                },
                {
                    "id": 558,
                    "rule_id": 556,
                    "status": 1,
                    "create_time": "2024-05-29 18:37:14",
                    "update_time": "2024-06-06 14:42:46",
                    "name": "权限管理",
                    "desc": null,
                    "frontpath": "/access/list",
                    "condition": "",
                    "menu": 1,
                    "order": 50,
                    "icon": "AlarmClock",
                    "method": "",
                    "child": []
                },
                {
                    "id": 587,
                    "rule_id": 556,
                    "status": 1,
                    "create_time": "2024-05-30 16:32:43",
                    "update_time": "2024-06-06 14:42:50",
                    "name": "角色管理",
                    "desc": null,
                    "frontpath": "/role/list",
                    "condition": "",
                    "menu": 1,
                    "order": 50,
                    "icon": "AddLocation",
                    "method": "",
                    "child": []
                }
            ]
        },
        {
            "id": 574,
            "rule_id": 0,
            "status": 1,
            "create_time": "2024-05-30 14:29:44",
            "update_time": "2024-05-30 17:25:32",
            "name": "用户管理",
            "desc": null,
            "frontpath": "",
            "condition": "",
            "menu": 1,
            "order": 4,
            "icon": "User",
            "method": "",
            "child": [
                {
                    "id": 575,
                    "rule_id": 574,
                    "status": 1,
                    "create_time": "2024-05-30 14:30:55",
                    "update_time": "2024-05-30 14:30:55",
                    "name": "用户管理",
                    "desc": null,
                    "frontpath": "/user/list",
                    "condition": "",
                    "menu": 1,
                    "order": 50,
                    "icon": "UserFilled",
                    "method": "",
                    "child": []
                },
                {
                    "id": 576,
                    "rule_id": 574,
                    "status": 1,
                    "create_time": "2024-05-30 14:33:11",
                    "update_time": "2024-05-30 14:33:11",
                    "name": "会员等级",
                    "desc": null,
                    "frontpath": "/level/list",
                    "condition": "",
                    "menu": 1,
                    "order": 50,
                    "icon": "DataLine",
                    "method": "",
                    "child": []
                }
            ]
        },
        {
            "id": 6,
            "rule_id": 0,
            "status": 1,
            "create_time": "2019-08-11 13:36:36",
            "update_time": "2024-05-30 16:45:31",
            "name": "商品管理",
            "desc": "shop_goods_list",
            "frontpath": null,
            "condition": null,
            "menu": 1,
            "order": 5,
            "icon": "shopping-bag",
            "method": "GET",
            "child": [
                {
                    "id": 15,
                    "rule_id": 6,
                    "status": 1,
                    "create_time": "2019-12-28 13:44:32",
                    "update_time": "2024-05-30 15:44:44",
                    "name": "规格管理",
                    "desc": "shop_sku_list",
                    "frontpath": "/skus/list",
                    "condition": "",
                    "menu": 1,
                    "order": 19,
                    "icon": "aim",
                    "method": "GET",
                    "child": []
                },
                {
                    "id": 13,
                    "rule_id": 6,
                    "status": 1,
                    "create_time": "2019-12-28 13:42:13",
                    "update_time": "2024-05-30 15:45:04",
                    "name": "商品管理",
                    "desc": "shop_goods_list",
                    "frontpath": "/goods/list",
                    "condition": "",
                    "menu": 1,
                    "order": 20,
                    "icon": "shopping-cart-full",
                    "method": "GET",
                    "child": [
                        {
                            "id": 565,
                            "rule_id": 13,
                            "status": 1,
                            "create_time": "2024-05-30 12:45:24",
                            "update_time": "2024-05-30 12:45:24",
                            "name": "5555",
                            "desc": null,
                            "frontpath": "",
                            "condition": "",
                            "menu": 1,
                            "order": 50,
                            "icon": "AlarmClock",
                            "method": "",
                            "child": []
                        }
                    ]
                },
                {
                    "id": 14,
                    "rule_id": 6,
                    "status": 1,
                    "create_time": "2019-12-28 13:44:00",
                    "update_time": "2024-05-29 18:59:54",
                    "name": "分类管理",
                    "desc": "shop_category_list",
                    "frontpath": "/category/list",
                    "condition": "",
                    "menu": 1,
                    "order": 20,
                    "icon": "menu",
                    "method": "GET",
                    "child": []
                }
            ]
        },
        {
            "id": 511,
            "rule_id": 0,
            "status": 1,
            "create_time": "2024-05-25 13:17:25",
            "update_time": "2024-05-30 16:45:31",
            "name": "订单管理",
            "desc": null,
            "frontpath": "",
            "condition": "",
            "menu": 1,
            "order": 6,
            "icon": "Tickets",
            "method": "",
            "child": [
                {
                    "id": 512,
                    "rule_id": 511,
                    "status": 1,
                    "create_time": "2024-05-25 13:18:03",
                    "update_time": "2024-05-28 14:44:26",
                    "name": "订单管理",
                    "desc": null,
                    "frontpath": "/order/list",
                    "condition": "",
                    "menu": 1,
                    "order": 50,
                    "icon": "Tickets",
                    "method": "",
                    "child": [
                        {
                            "id": 550,
                            "rule_id": 512,
                            "status": 1,
                            "create_time": "2024-05-28 21:15:38",
                            "update_time": "2024-05-28 21:15:38",
                            "name": "sssss",
                            "desc": null,
                            "frontpath": "",
                            "condition": "",
                            "menu": 1,
                            "order": 50,
                            "icon": "",
                            "method": "",
                            "child": []
                        }
                    ]
                }
            ]
        },
        {
            "id": 577,
            "rule_id": 0,
            "status": 1,
            "create_time": "2024-05-30 14:34:37",
            "update_time": "2024-05-30 16:45:31",
            "name": "分销管理",
            "desc": null,
            "frontpath": "",
            "condition": "",
            "menu": 1,
            "order": 7,
            "icon": "Setting",
            "method": "",
            "child": [
                {
                    "id": 579,
                    "rule_id": 577,
                    "status": 1,
                    "create_time": "2024-05-30 14:36:27",
                    "update_time": "2024-05-30 14:36:27",
                    "name": "分销员管理",
                    "desc": null,
                    "frontpath": "/distribution/index",
                    "condition": "",
                    "menu": 1,
                    "order": 50,
                    "icon": "User",
                    "method": "",
                    "child": []
                }
            ]
        },
        {
            "id": 513,
            "rule_id": 0,
            "status": 1,
            "create_time": "2024-05-25 13:45:56",
            "update_time": "2024-05-30 16:45:32",
            "name": "优惠券管理",
            "desc": null,
            "frontpath": "",
            "condition": "",
            "menu": 1,
            "order": 8,
            "icon": "AddLocation",
            "method": "",
            "child": [
                {
                    "id": 545,
                    "rule_id": 513,
                    "status": 1,
                    "create_time": "2024-05-28 14:49:34",
                    "update_time": "2024-05-29 18:59:56",
                    "name": "优惠券管理",
                    "desc": null,
                    "frontpath": "/coupon/list",
                    "condition": "",
                    "menu": 1,
                    "order": 50,
                    "icon": "Coin",
                    "method": "",
                    "child": []
                }
            ]
        },
        {
            "id": 515,
            "rule_id": 0,
            "status": 1,
            "create_time": "2024-05-25 14:14:33",
            "update_time": "2024-05-30 16:45:33",
            "name": "评论管理",
            "desc": null,
            "frontpath": "",
            "condition": "",
            "menu": 1,
            "order": 9,
            "icon": "Aim",
            "method": "",
            "child": [
                {
                    "id": 544,
                    "rule_id": 515,
                    "status": 1,
                    "create_time": "2024-05-28 14:49:02",
                    "update_time": "2024-05-29 18:59:57",
                    "name": "评论管理",
                    "desc": null,
                    "frontpath": "/comment/list",
                    "condition": "",
                    "menu": 1,
                    "order": 50,
                    "icon": "ChatLineSquare",
                    "method": "",
                    "child": []
                }
            ]
        },
        {
            "id": 578,
            "rule_id": 0,
            "status": 1,
            "create_time": "2024-05-30 14:35:29",
            "update_time": "2024-05-30 16:45:33",
            "name": "公告管理",
            "desc": null,
            "frontpath": "",
            "condition": "",
            "menu": 1,
            "order": 10,
            "icon": "ChatLineSquare",
            "method": "",
            "child": [
                {
                    "id": 581,
                    "rule_id": 578,
                    "status": 1,
                    "create_time": "2024-05-30 14:38:53",
                    "update_time": "2024-05-30 14:38:53",
                    "name": "公告管理",
                    "desc": null,
                    "frontpath": "/notice/list",
                    "condition": "",
                    "menu": 1,
                    "order": 50,
                    "icon": "ChatLineRound",
                    "method": "",
                    "child": []
                },
                {
                    "id": 585,
                    "rule_id": 578,
                    "status": 1,
                    "create_time": "2024-05-30 15:05:49",
                    "update_time": "2024-05-30 16:44:52",
                    "name": "测试界面",
                    "desc": null,
                    "frontpath": "",
                    "condition": "",
                    "menu": 1,
                    "order": 50,
                    "icon": "",
                    "method": "",
                    "child": []
                }
            ]
        }
    ],
    "ruleNames": [
        "调度,POST",
        "createRule,POST",
        "updateRule,POST",
        "deleteRule,POST",
        "getRuleList,GET",
        "updateRuleStatus,POST",
        "createRole,POST",
        "updateRole,POST",
        "deleteRole,POST",
        "getRoleList,GET",
        "updateRoleStatus,POST",
        "getGoodsList,GET",
        "getCategoryList,GET",
        "createCategory,POST",
        "sortCategory,POST",
        "updateCategory,POST",
        "updateCategoryStatus,POST",
        "deleteCategory,DELETE",
        "createSkus,POST",
        "deleteSkus,POST",
        "updateSkus,POST",
        "updateSkusStatus,POST",
        "getUserLevelList,GET",
        "createUserLevel,POST",
        "updateUserLevel,POST",
        "updateUserLevelStatus,POST",
        "deleteUserLevel,POST",
        "deleteManager,POST",
        "getManagerList,GET",
        "updateManager,POST",
        "updateManagerStatus,POST",
        "readGoods,GET",
        "updateGoodsSkus,POST",
        "setGoodsBanner,POST",
        "restoreGoods,POST",
        "destroyGoods,POST",
        "deleteGoods,POST",
        "updateGoodsStatus,POST",
        "createGoods,POST",
        "updateGoods,POST",
        "checkGoods,POST",
        "createGoodsSkusCard,POST",
        "sortGoodsSkusCard,POST",
        "updateGoodsSkusCard,POST",
        "deleteGoodsSkusCard,POST",
        "createGoodsSkusCardValue,POST",
        "updateGoodsSkusCardValue,POST",
        "deleteGoodsSkusCardValue,POST",
        "getNoticeList,GET",
        "createNotice,POST",
        "updateNotice,POST",
        "deleteNotice,POST",
        "getCategoryGoods,GET",
        "connectCategoryGoods,POST",
        "deleteCategoryGoods,POST",
        "setRoleRules,POST"
    ]
}

宝码香车
关注
专栏目录
vue3+elementplus后台管理系统，实现侧边栏菜单显示到主内容区域
低代码布道师的博客
07-24 3649
我们本篇主要是解决了侧边栏导航点击的时候显示到主内容区域的问题，需要设置好路由的嵌套关系，让菜单启用路由功能，并且在主内容区域设置路由视图。
vue3项目实战(五)---左侧导航菜单栏、菜单组件封装
qq_39253096的博客
03-05 3645
这里字典管理出现了两次。是因为 我们需要根据自己的需要选择当前菜单下只有一个子菜单时，父菜单是否展示。3.1 components新建MenuTree文件夹，文件夹 新建MenuTree.vue。如果父菜单不展示的红色部分改为大于1就可以了。如果父菜单展示的话,红色部分的注释掉即可。我喜欢都展示，所以注释掉了=1的情况。二、route下index.ts调整。三 、MenuTree组件封装。四、NarBar.vue中使用。1.2.1 权限管理。1.2.2 系统管理。五、运行代码查看效果。
通过element-Plus中menu和router的绑定，实现页面跳转，完整版
最新发布
qq_60692304的博客
09-03 882
通过vue3+elementPlus的menu组件结合router路由属性实现动态侧边栏效果，实现侧边栏动态跟随着路由的变化
elementui-plus路由跳转
qq_44213979的博客
08-01 1355
:default-active=“activeIndex” router <el-row class="asidemenu"> <el-menu active-text-color="#ffffff" background-color="#293348" default-openeds="1" class="el-menu-vertical-demo" text-color="#bbbbbb" .
后台管理左侧菜单
73
12-15 434
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .h...
Vue3 根据路由动态生成Menu左侧菜单栏
好记性，不如烂键盘。
01-24 2455
根据路由动态生成Menu左侧菜单栏
vue3使用element-plus搭建后台管理系统---菜单管理
07-01
在本项目中，我们主要探讨的是如何利用Vue3框架与Element-Plus库来构建一个后台管理系统，特别是关于菜单管理的部分。Vue3是Vue.js的最新版本，它带来了许多性能优化和开发体验提升的新特性，如Composition API、...
vue3-elementPlus-admin:vue3后台管理模板 , 基于vue3.0 + elementPlus 实现的后台管理系统模板 动态路由 动态菜单 皮肤切换 登录逻辑
05-10
基于vue3.x 实现的后台管理系统模板 1、 登录逻辑. 2、 基本布局(基于elementPlus) 3、 动态路由逻辑 4、 动态菜单栏逻辑 5、 面包屑 6、 皮肤切换 7、 假数据模拟路由菜单 gif示例 Project setup yarn install ...
vue3+ElementPlus后台管理搭建（一）
citadel1的博客
01-15 9524
vue3+ElementPlus后台管理搭建（一） 基础布局+侧边栏 项目创建 创建项目时选择vue3.x，同时选择vue-router 和vuex 项目结构： 2. element-plus安装 2.1安装 yarn add element-plus 2.2引用 在vue项目中，打开 main.js文件 ...... import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' createApp(Ap
vue3+ant-design-vue - 最新实现“侧边动态导航栏+面包屑导航“功能，vue3+ant后台管理系统左侧动态菜单栏和面包屑菜单实现，面包屑和菜单根据路由动态自动处理（详细示例代码）
高级前端工程师
04-02 2641
vue3，ant-design-vue，antd，el-breadcrumb，a-menu，动态导航栏和面包屑，vue3+ant design vue动态面包屑，动态导航栏，菜单栏，vue3监听路由变化,动态修改面包屑，antd-vue3实现面包屑，vue3中使用antd-vue实现面包屑导航，头部面包屑导航，vue后台管理系统，面包屑头部导航栏，详细示例demo，动态生成面包屑导航教程，新手小白详细示例，面包屑和布局和菜单demo，面包屑和导航菜单的联动，如何跟随路由变化，监听路由变化,动态修改面包屑，v
很实用的后台左侧管理菜单
02-20
经过本人测试过的后台左侧管理菜单
jQuery后台管理系统可折叠左侧导航菜单特效
06-05
jQuery后台管理系统可折叠左侧导航菜单特效，这也是一款响应式网站后台管理界面UI框架模板。
基于Vue3 + Element Plus 的后台管理系统解决方案.zip
06-15
基于Vue3 + Element Plus 的后台管理系统解决方案 功能 Element Plus 登录/注销 Dashboard 表格 Tab 选项卡 表单 图表 bar_chart 富文本编辑器 markdown 编辑器 图片拖拽/裁剪上传 支持切换主题色 sparkles 列表拖拽排序 权限测试 404 / 403 三级菜单 自定义图标 可拖拽弹窗 国际化
Vue3+ElementPlus el-menu子菜单设置父菜单选中技巧
柒柒兮的博客
08-02 3211
第一步在路由中设置 { path: "/aView", name: "aView", meta: { title: '父菜单' }, component: () => import( "../views/aView.vue"), }, { path: "/bView", name: "bView", meta: { title: '子菜单', activeMenu:'aView'//注意这里的设置,设置的是父菜单的pathName }, component: () =&
vue3+elementPlus之侧边菜单栏功能
村长在路上
11-25 1088
选择默认的颜色，将代码拷贝至模块中。稍微把不需要的修改一下。
element-plus+vue3项目（侧边栏菜单的使用和历史记录切换问题的解决（高点效果对应不上））
weixin_62639453的博客
02-28 1647
描述：当我点击左边侧边栏的时候，选中高亮能够选中，但是在浏览器上面点击左右回退，他的高亮就乱来了，比如我点击修改通知---->项目管理，然后点击上面浏览器的回退按钮，右边内容能够对应回退，但是高亮选中效果保留到了修改通知。默认是没有问题的，但是我再从修改通知---->项目管理---->修改通知，按道理来说，回退一步，应该回到项目管理，高亮也是，但是他高亮显示到了修改通知，产生了错乱。从修改通知---->项目管理---->创建项目按钮（进行创建项目页面），点击回退也还是回退到修改通知，应该是回到项目管理。
vue3——element-plus 实现页面刷新之后，保持菜单的激活状态
wlijun_0808的博客
11-17 2894
vue3——element-plus 实现页面刷新之后，保持菜单的激活状态
Vue3 Element-plus导航栏,页面点击刷新后失去当前导航栏点击高亮,到默认地址
weixin_56716246的博客
11-09 1459
Vue3 Element-plus导航栏,页面点击刷新后失去当前导航栏点击高亮,到默认地址
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宝码香车

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值