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

    默认激活菜单,效果： 

    默认激活菜单，效果1：

    默认激活菜单，效果2：

    跳转链接效果：

    制作：

    2.  
    3. <template>
    4.   <el-menu
    5.       active-text-color="#409EFF"
    6.       background-color="#32363f"
    7.       :default-active="defaultMenu"
    8.       text-color="#fff"
    9.       @open="handleOpen"
    10.       @close="handleClose"
    11.       router
    12.   >
    13.     <el-sub-menu :index="ind+1" v-for="(menuItem,ind) in userStore.userInfo.menus" :id="menuItem.id">
    14.       <template #title>
    15.         <el-icon>
    16.           <component :is="menuItem.icon">component>
    17.         el-icon>
    18.         <span>{{menuItem.name}}span>
    19.       template>
    20.       <el-menu-item :index="childItem.frontpath" v-for="(childItem,childInd ) in menuItem.child">
    21.         <template #title>
    22.           <el-icon>
    23.             <component :is="childItem.icon">component>
    24.           el-icon>
    25.           <span>{{childItem.name}}span>
    26.         template>
    27.       el-menu-item>
    28.  
    29.     el-sub-menu>
    30.  
    31.  
    32.   el-menu>
    33. template>
    34.  
    35. <style scoped>
    36.  
    37. style>

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

    代码解析，默认激活菜单

    数据格式：

    1. {
    2.     "status": 200,
    3.     "id": 3,
    4.     "username": "admin",
    5.     "avatar": "http:xxxxxxxxxxx.com/public/642438a225ad5.jpg",
    6.     "super": 1,
    7.     "role": {
    8.         "id": 2,
    9.         "name": "超级管理员"
    10.     },
    11.     "menus": [
    12.         {
    13.             "id": 598,
    14.             "rule_id": 0,
    15.             "status": 1,
    16.             "create_time": "2024-06-11 23:22:32",
    17.             "update_time": "2024-06-19 22:32:52",
    18.             "name": "后台首页",
    19.             "desc": null,
    20.             "frontpath": "",
    21.             "condition": "",
    22.             "menu": 1,
    23.             "order": 1,
    24.             "icon": "House",
    25.             "method": "",
    26.             "child": [
    27.                 {
    28.                     "id": 599,
    29.                     "rule_id": 598,
    30.                     "status": 1,
    31.                     "create_time": "2024-06-11 23:24:51",
    32.                     "update_time": "2024-06-19 22:32:55",
    33.                     "name": "后台首页",
    34.                     "desc": null,
    35.                     "frontpath": "/home",
    36.                     "condition": "",
    37.                     "menu": 1,
    38.                     "order": 50,
    39.                     "icon": "AddLocation",
    40.                     "method": "",
    41.                     "child": []
    42.                 }
    43.             ]
    44.         },
    45.         {
    46.             "id": 562,
    47.             "rule_id": 0,
    48.             "status": 1,
    49.             "create_time": "2024-05-29 21:18:00",
    50.             "update_time": "2024-06-11 23:19:37",
    51.             "name": "图库管理",
    52.             "desc": null,
    53.             "frontpath": "",
    54.             "condition": "调度",
    55.             "menu": 1,
    56.             "order": 2,
    57.             "icon": "Opportunity",
    58.             "method": "POST",
    59.             "child": [
    60.                 {
    61.                     "id": 563,
    62.                     "rule_id": 562,
    63.                     "status": 1,
    64.                     "create_time": "2024-05-29 21:19:18",
    65.                     "update_time": "2024-05-30 14:17:37",
    66.                     "name": "图库管理",
    67.                     "desc": null,
    68.                     "frontpath": "/image/list",
    69.                     "condition": "",
    70.                     "menu": 1,
    71.                     "order": 2,
    72.                     "icon": "PictureFilled",
    73.                     "method": "",
    74.                     "child": [
    75.                         {
    76.                             "id": 571,
    77.                             "rule_id": 563,
    78.                             "status": 1,
    79.                             "create_time": "2024-05-30 14:16:47",
    80.                             "update_time": "2024-05-30 14:16:47",
    81.                             "name": "11",
    82.                             "desc": null,
    83.                             "frontpath": "11",
    84.                             "condition": "",
    85.                             "menu": 1,
    86.                             "order": 50,
    87.                             "icon": "AddLocation",
    88.                             "method": "",
    89.                             "child": [
    90.                                 {
    91.                                     "id": 597,
    92.                                     "rule_id": 571,
    93.                                     "status": 1,
    94.                                     "create_time": "2024-06-11 17:06:34",
    95.                                     "update_time": "2024-06-11 17:06:34",
    96.                                     "name": "图库",
    97.                                     "desc": null,
    98.                                     "frontpath": "",
    99.                                     "condition": "",
    100.                                     "menu": 1,
    101.                                     "order": 50,
    102.                                     "icon": "AlarmClock",
    103.                                     "method": "",
    104.                                     "child": []
    105.                                 }
    106.                             ]
    107.                         }
    108.                     ]
    109.                 }
    110.             ]
    111.         },
    112.         {
    113.             "id": 556,
    114.             "rule_id": 0,
    115.             "status": 1,
    116.             "create_time": "2024-05-29 18:35:06",
    117.             "update_time": "2024-05-30 16:45:55",
    118.             "name": "管理员管理",
    119.             "desc": null,
    120.             "frontpath": "",
    121.             "condition": "",
    122.             "menu": 1,
    123.             "order": 3,
    124.             "icon": "Avatar",
    125.             "method": "",
    126.             "child": [
    127.                 {
    128.                     "id": 557,
    129.                     "rule_id": 556,
    130.                     "status": 1,
    131.                     "create_time": "2024-05-29 18:36:05",
    132.                     "update_time": "2024-05-30 16:45:54",
    133.                     "name": "管理员管理",
    134.                     "desc": null,
    135.                     "frontpath": "/manager/list",
    136.                     "condition": "",
    137.                     "menu": 1,
    138.                     "order": 50,
    139.                     "icon": "AddLocation",
    140.                     "method": "",
    141.                     "child": []
    142.                 },
    143.                 {
    144.                     "id": 558,
    145.                     "rule_id": 556,
    146.                     "status": 1,
    147.                     "create_time": "2024-05-29 18:37:14",
    148.                     "update_time": "2024-06-06 14:42:46",
    149.                     "name": "权限管理",
    150.                     "desc": null,
    151.                     "frontpath": "/access/list",
    152.                     "condition": "",
    153.                     "menu": 1,
    154.                     "order": 50,
    155.                     "icon": "AlarmClock",
    156.                     "method": "",
    157.                     "child": []
    158.                 },
    159.                 {
    160.                     "id": 587,
    161.                     "rule_id": 556,
    162.                     "status": 1,
    163.                     "create_time": "2024-05-30 16:32:43",
    164.                     "update_time": "2024-06-06 14:42:50",
    165.                     "name": "角色管理",
    166.                     "desc": null,
    167.                     "frontpath": "/role/list",
    168.                     "condition": "",
    169.                     "menu": 1,
    170.                     "order": 50,
    171.                     "icon": "AddLocation",
    172.                     "method": "",
    173.                     "child": []
    174.                 }
    175.             ]
    176.         },
    177.         {
    178.             "id": 574,
    179.             "rule_id": 0,
    180.             "status": 1,
    181.             "create_time": "2024-05-30 14:29:44",
    182.             "update_time": "2024-05-30 17:25:32",
    183.             "name": "用户管理",
    184.             "desc": null,
    185.             "frontpath": "",
    186.             "condition": "",
    187.             "menu": 1,
    188.             "order": 4,
    189.             "icon": "User",
    190.             "method": "",
    191.             "child": [
    192.                 {
    193.                     "id": 575,
    194.                     "rule_id": 574,
    195.                     "status": 1,
    196.                     "create_time": "2024-05-30 14:30:55",
    197.                     "update_time": "2024-05-30 14:30:55",
    198.                     "name": "用户管理",
    199.                     "desc": null,
    200.                     "frontpath": "/user/list",
    201.                     "condition": "",
    202.                     "menu": 1,
    203.                     "order": 50,
    204.                     "icon": "UserFilled",
    205.                     "method": "",
    206.                     "child": []
    207.                 },
    208.                 {
    209.                     "id": 576,
    210.                     "rule_id": 574,
    211.                     "status": 1,
    212.                     "create_time": "2024-05-30 14:33:11",
    213.                     "update_time": "2024-05-30 14:33:11",
    214.                     "name": "会员等级",
    215.                     "desc": null,
    216.                     "frontpath": "/level/list",
    217.                     "condition": "",
    218.                     "menu": 1,
    219.                     "order": 50,
    220.                     "icon": "DataLine",
    221.                     "method": "",
    222.                     "child": []
    223.                 }
    224.             ]
    225.         },
    226.         {
    227.             "id": 6,
    228.             "rule_id": 0,
    229.             "status": 1,
    230.             "create_time": "2019-08-11 13:36:36",
    231.             "update_time": "2024-05-30 16:45:31",
    232.             "name": "商品管理",
    233.             "desc": "shop_goods_list",
    234.             "frontpath": null,
    235.             "condition": null,
    236.             "menu": 1,
    237.             "order": 5,
    238.             "icon": "shopping-bag",
    239.             "method": "GET",
    240.             "child": [
    241.                 {
    242.                     "id": 15,
    243.                     "rule_id": 6,
    244.                     "status": 1,
    245.                     "create_time": "2019-12-28 13:44:32",
    246.                     "update_time": "2024-05-30 15:44:44",
    247.                     "name": "规格管理",
    248.                     "desc": "shop_sku_list",
    249.                     "frontpath": "/skus/list",
    250.                     "condition": "",
    251.                     "menu": 1,
    252.                     "order": 19,
    253.                     "icon": "aim",
    254.                     "method": "GET",
    255.                     "child": []
    256.                 },
    257.                 {
    258.                     "id": 13,
    259.                     "rule_id": 6,
    260.                     "status": 1,
    261.                     "create_time": "2019-12-28 13:42:13",
    262.                     "update_time": "2024-05-30 15:45:04",
    263.                     "name": "商品管理",
    264.                     "desc": "shop_goods_list",
    265.                     "frontpath": "/goods/list",
    266.                     "condition": "",
    267.                     "menu": 1,
    268.                     "order": 20,
    269.                     "icon": "shopping-cart-full",
    270.                     "method": "GET",
    271.                     "child": [
    272.                         {
    273.                             "id": 565,
    274.                             "rule_id": 13,
    275.                             "status": 1,
    276.                             "create_time": "2024-05-30 12:45:24",
    277.                             "update_time": "2024-05-30 12:45:24",
    278.                             "name": "5555",
    279.                             "desc": null,
    280.                             "frontpath": "",
    281.                             "condition": "",
    282.                             "menu": 1,
    283.                             "order": 50,
    284.                             "icon": "AlarmClock",
    285.                             "method": "",
    286.                             "child": []
    287.                         }
    288.                     ]
    289.                 },
    290.                 {
    291.                     "id": 14,
    292.                     "rule_id": 6,
    293.                     "status": 1,
    294.                     "create_time": "2019-12-28 13:44:00",
    295.                     "update_time": "2024-05-29 18:59:54",
    296.                     "name": "分类管理",
    297.                     "desc": "shop_category_list",
    298.                     "frontpath": "/category/list",
    299.                     "condition": "",
    300.                     "menu": 1,
    301.                     "order": 20,
    302.                     "icon": "menu",
    303.                     "method": "GET",
    304.                     "child": []
    305.                 }
    306.             ]
    307.         },
    308.         {
    309.             "id": 511,
    310.             "rule_id": 0,
    311.             "status": 1,
    312.             "create_time": "2024-05-25 13:17:25",
    313.             "update_time": "2024-05-30 16:45:31",
    314.             "name": "订单管理",
    315.             "desc": null,
    316.             "frontpath": "",
    317.             "condition": "",
    318.             "menu": 1,
    319.             "order": 6,
    320.             "icon": "Tickets",
    321.             "method": "",
    322.             "child": [
    323.                 {
    324.                     "id": 512,
    325.                     "rule_id": 511,
    326.                     "status": 1,
    327.                     "create_time": "2024-05-25 13:18:03",
    328.                     "update_time": "2024-05-28 14:44:26",
    329.                     "name": "订单管理",
    330.                     "desc": null,
    331.                     "frontpath": "/order/list",
    332.                     "condition": "",
    333.                     "menu": 1,
    334.                     "order": 50,
    335.                     "icon": "Tickets",
    336.                     "method": "",
    337.                     "child": [
    338.                         {
    339.                             "id": 550,
    340.                             "rule_id": 512,
    341.                             "status": 1,
    342.                             "create_time": "2024-05-28 21:15:38",
    343.                             "update_time": "2024-05-28 21:15:38",
    344.                             "name": "sssss",
    345.                             "desc": null,
    346.                             "frontpath": "",
    347.                             "condition": "",
    348.                             "menu": 1,
    349.                             "order": 50,
    350.                             "icon": "",
    351.                             "method": "",
    352.                             "child": []
    353.                         }
    354.                     ]
    355.                 }
    356.             ]
    357.         },
    358.         {
    359.             "id": 577,
    360.             "rule_id": 0,
    361.             "status": 1,
    362.             "create_time": "2024-05-30 14:34:37",
    363.             "update_time": "2024-05-30 16:45:31",
    364.             "name": "分销管理",
    365.             "desc": null,
    366.             "frontpath": "",
    367.             "condition": "",
    368.             "menu": 1,
    369.             "order": 7,
    370.             "icon": "Setting",
    371.             "method": "",
    372.             "child": [
    373.                 {
    374.                     "id": 579,
    375.                     "rule_id": 577,
    376.                     "status": 1,
    377.                     "create_time": "2024-05-30 14:36:27",
    378.                     "update_time": "2024-05-30 14:36:27",
    379.                     "name": "分销员管理",
    380.                     "desc": null,
    381.                     "frontpath": "/distribution/index",
    382.                     "condition": "",
    383.                     "menu": 1,
    384.                     "order": 50,
    385.                     "icon": "User",
    386.                     "method": "",
    387.                     "child": []
    388.                 }
    389.             ]
    390.         },
    391.         {
    392.             "id": 513,
    393.             "rule_id": 0,
    394.             "status": 1,
    395.             "create_time": "2024-05-25 13:45:56",
    396.             "update_time": "2024-05-30 16:45:32",
    397.             "name": "优惠券管理",
    398.             "desc": null,
    399.             "frontpath": "",
    400.             "condition": "",
    401.             "menu": 1,
    402.             "order": 8,
    403.             "icon": "AddLocation",
    404.             "method": "",
    405.             "child": [
    406.                 {
    407.                     "id": 545,
    408.                     "rule_id": 513,
    409.                     "status": 1,
    410.                     "create_time": "2024-05-28 14:49:34",
    411.                     "update_time": "2024-05-29 18:59:56",
    412.                     "name": "优惠券管理",
    413.                     "desc": null,
    414.                     "frontpath": "/coupon/list",
    415.                     "condition": "",
    416.                     "menu": 1,
    417.                     "order": 50,
    418.                     "icon": "Coin",
    419.                     "method": "",
    420.                     "child": []
    421.                 }
    422.             ]
    423.         },
    424.         {
    425.             "id": 515,
    426.             "rule_id": 0,
    427.             "status": 1,
    428.             "create_time": "2024-05-25 14:14:33",
    429.             "update_time": "2024-05-30 16:45:33",
    430.             "name": "评论管理",
    431.             "desc": null,
    432.             "frontpath": "",
    433.             "condition": "",
    434.             "menu": 1,
    435.             "order": 9,
    436.             "icon": "Aim",
    437.             "method": "",
    438.             "child": [
    439.                 {
    440.                     "id": 544,
    441.                     "rule_id": 515,
    442.                     "status": 1,
    443.                     "create_time": "2024-05-28 14:49:02",
    444.                     "update_time": "2024-05-29 18:59:57",
    445.                     "name": "评论管理",
    446.                     "desc": null,
    447.                     "frontpath": "/comment/list",
    448.                     "condition": "",
    449.                     "menu": 1,
    450.                     "order": 50,
    451.                     "icon": "ChatLineSquare",
    452.                     "method": "",
    453.                     "child": []
    454.                 }
    455.             ]
    456.         },
    457.         {
    458.             "id": 578,
    459.             "rule_id": 0,
    460.             "status": 1,
    461.             "create_time": "2024-05-30 14:35:29",
    462.             "update_time": "2024-05-30 16:45:33",
    463.             "name": "公告管理",
    464.             "desc": null,
    465.             "frontpath": "",
    466.             "condition": "",
    467.             "menu": 1,
    468.             "order": 10,
    469.             "icon": "ChatLineSquare",
    470.             "method": "",
    471.             "child": [
    472.                 {
    473.                     "id": 581,
    474.                     "rule_id": 578,
    475.                     "status": 1,
    476.                     "create_time": "2024-05-30 14:38:53",
    477.                     "update_time": "2024-05-30 14:38:53",
    478.                     "name": "公告管理",
    479.                     "desc": null,
    480.                     "frontpath": "/notice/list",
    481.                     "condition": "",
    482.                     "menu": 1,
    483.                     "order": 50,
    484.                     "icon": "ChatLineRound",
    485.                     "method": "",
    486.                     "child": []
    487.                 },
    488.                 {
    489.                     "id": 585,
    490.                     "rule_id": 578,
    491.                     "status": 1,
    492.                     "create_time": "2024-05-30 15:05:49",
    493.                     "update_time": "2024-05-30 16:44:52",
    494.                     "name": "测试界面",
    495.                     "desc": null,
    496.                     "frontpath": "",
    497.                     "condition": "",
    498.                     "menu": 1,
    499.                     "order": 50,
    500.                     "icon": "",
    501.                     "method": "",
    502.                     "child": []
    503.                 }
    504.             ]
    505.         }
    506.     ],
    507.     "ruleNames": [
    508.         "调度,POST",
    509.         "createRule,POST",
    510.         "updateRule,POST",
    511.         "deleteRule,POST",
    512.         "getRuleList,GET",
    513.         "updateRuleStatus,POST",
    514.         "createRole,POST",
    515.         "updateRole,POST",
    516.         "deleteRole,POST",
    517.         "getRoleList,GET",
    518.         "updateRoleStatus,POST",
    519.         "getGoodsList,GET",
    520.         "getCategoryList,GET",
    521.         "createCategory,POST",
    522.         "sortCategory,POST",
    523.         "updateCategory,POST",
    524.         "updateCategoryStatus,POST",
    525.         "deleteCategory,DELETE",
    526.         "createSkus,POST",
    527.         "deleteSkus,POST",
    528.         "updateSkus,POST",
    529.         "updateSkusStatus,POST",
    530.         "getUserLevelList,GET",
    531.         "createUserLevel,POST",
    532.         "updateUserLevel,POST",
    533.         "updateUserLevelStatus,POST",
    534.         "deleteUserLevel,POST",
    535.         "deleteManager,POST",
    536.         "getManagerList,GET",
    537.         "updateManager,POST",
    538.         "updateManagerStatus,POST",
    539.         "readGoods,GET",
    540.         "updateGoodsSkus,POST",
    541.         "setGoodsBanner,POST",
    542.         "restoreGoods,POST",
    543.         "destroyGoods,POST",
    544.         "deleteGoods,POST",
    545.         "updateGoodsStatus,POST",
    546.         "createGoods,POST",
    547.         "updateGoods,POST",
    548.         "checkGoods,POST",
    549.         "createGoodsSkusCard,POST",
    550.         "sortGoodsSkusCard,POST",
    551.         "updateGoodsSkusCard,POST",
    552.         "deleteGoodsSkusCard,POST",
    553.         "createGoodsSkusCardValue,POST",
    554.         "updateGoodsSkusCardValue,POST",
    555.         "deleteGoodsSkusCardValue,POST",
    556.         "getNoticeList,GET",
    557.         "createNotice,POST",
    558.         "updateNotice,POST",
    559.         "deleteNotice,POST",
    560.         "getCategoryGoods,GET",
    561.         "connectCategoryGoods,POST",
    562.         "deleteCategoryGoods,POST",
    563.         "setRoleRules,POST"
    564.     ]
    565. }

  • 相关阅读:
    弹跳的小球
    C# 连接Mysql数据库查询结果显示在datagridview控件上 采用ADO.NET模式
    懒人福音：Java版Webhook机器人，一键开启‘躺赢’模式
    分享好用无广告的手机浏览器，亲测值得下载
    001.第一个C语言项目
    和月薪3W的聊过后，才知道自己一直在打杂...
    创意电子学-小知识：如何使用面包板
    结构体和联合体
    【计算机网络】传输层协议——TCP(上）
    运维自动化：提高效率的秘诀
  • 原文地址：https://blog.csdn.net/qq_33650655/article/details/139844255