VUE3+el 实现动态菜单页面跳转

猫猫.net

已于 2024-03-09 12:54:57 修改

阅读量1.4k

点赞数 24

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2023-12-07 15:31:13 首次发布

本文链接：https://blog.csdn.net/qq_58734875/article/details/134849403

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先附上一张效果图

在用户登录接口根据用户的权限返回用户的菜单，存储到浏览器当中

sessionStorage.setItem('MenuTree', JSON.stringify(这里放返回的菜单数据));
我的格式是
[
  {
    "id": "1840511658999877",
    "label": "基础设定",
    "icon": "menu_mainSetting",
    "url": "",
    "path": "",
    "priority": 1001,
    "subordinate": 0,
    "children": [
      {
        "id": "1840514421719109",
        "label": "货币",
        "icon": "",
        "url": "/basicSettings/Currency",
        "path": "/views/basicSettings/Currency.vue",
        "priority": 1002,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1840515017244741",
        "label": "国家",
        "icon": "",
        "url": "/basicSettings/Country",
        "path": "/views/basicSettings/Country.vue",
        "priority": 1003,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1840515383476293",
        "label": "地区",
        "icon": "",
        "url": "/basicSettings/Region",
        "path": "/views/basicSettings/Region.vue",
        "priority": 1004,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1840515840589893",
        "label": "职员部门",
        "icon": "",
        "url": "/basicSettings/EmployeeDepartment",
        "path": "/views/basicSettings/EmployeeDepartment.vue",
        "priority": 1005,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1840516155473989",
        "label": "职位",
        "icon": "",
        "url": "/basicSettings/EmployeePosition",
        "path": "/views/basicSettings/EmployeePosition.vue",
        "priority": 1006,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1909884238282821",
        "label": "客户组别",
        "icon": "",
        "url": "/basicSettings/CustomerGroup",
        "path": "/views/basicSettings/CustomerGroup.vue",
        "priority": 1007,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1909886543806533",
        "label": "付款方式组别",
        "icon": "",
        "url": "/basicSettings/PaymentGroup",
        "path": "/views/basicSettings/PaymentGroup.vue",
        "priority": 1008,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1909887029035077",
        "label": "付款方式",
        "icon": "",
        "url": "/basicSettings/Payment",
        "path": "/views/basicSettings/Payment.vue",
        "priority": 1009,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1912709966528581",
        "label": "预算申请组别",
        "icon": "",
        "url": "/basicSettings/BudgetReqGroup",
        "path": "/views/basicSettings/BudgetReqGroup.vue",
        "priority": 1010,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1912711678509125",
        "label": "客户渠道",
        "icon": "",
        "url": "/basicSettings/Channel",
        "path": "/views/basicSettings/Channel.vue",
        "priority": 1011,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1912712261976133",
        "label": "标签组别",
        "icon": "",
        "url": "/basicSettings/TagGroup",
        "path": "/views/basicSettings/TagGroup.vue",
        "priority": 1012,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1912712716795973",
        "label": "标签",
        "icon": "",
        "url": "/basicSettings/Tag",
        "path": "/views/basicSettings/Tag.vue",
        "priority": 1013,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1919548392882245",
        "label": "预算申请公司设定",
        "icon": "",
        "url": "/basicSettings/BudgetReqCompany",
        "path": "/views/basicSettings/BudgetReqCompany.vue",
        "priority": 1014,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1919907027370053",
        "label": "退税设定",
        "icon": "",
        "url": "/basicSettings/TaxRefund",
        "path": "/views/basicSettings/TaxRefund.vue",
        "priority": 1015,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1921002511007813",
        "label": "Ucode前缀设定",
        "icon": "",
        "url": "/basicSettings/UCodePerfix",
        "path": "/views/basicSettings/UCodePerfix.vue",
        "priority": 1016,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1921040935944261",
        "label": "交易备注",
        "icon": "",
        "url": "/basicSettings/TransactionRemark",
        "path": "/views/basicSettings/TransactionRemark.vue",
        "priority": 1017,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1929513248849989",
        "label": "交易条款",
        "icon": "",
        "url": "/basicSettings/TransactionTerm",
        "path": "/views/basicSettings/TransactionTerm.vue",
        "priority": 1018,
        "subordinate": 1,
        "children": []
      }
    ]
  },
  {
    "id": "1840512738771013",
    "label": "设定",
    "icon": "menu_setting",
    "url": "",
    "path": "",
    "priority": 2001,
    "subordinate": 0,
    "children": [
      {
        "id": "1840518268567621",
        "label": "公司",
        "icon": "",
        "url": "/settings/Company",
        "path": "/views/settings/Company.vue",
        "priority": 2002,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1840519013892165",
        "label": "用户",
        "icon": "",
        "url": "/settings/User",
        "path": "/views/settings/User.vue",
        "priority": 2003,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1840519568080965",
        "label": "产品",
        "icon": "",
        "url": "",
        "path": "",
        "priority": 2201,
        "subordinate": 1,
        "children": [
          {
            "id": "1840520077541445",
            "label": "货品资讯",
            "icon": "",
            "url": "/settings/product/ItemMaster",
            "path": "/views/settings/product/ItemMaster.vue",
            "priority": 2202,
            "subordinate": 2,
            "children": []
          },
          {
            "id": "1840516814209093",
            "label": "货品部门",
            "icon": "",
            "url": "/settings/product/ProductDepartment",
            "path": "/views/settings/product/ProductDepartment.vue",
            "priority": 2203,
            "subordinate": 1,
            "children": []
          },
          {
            "id": "1840517137088581",
            "label": "货品类别",
            "icon": "",
            "url": "/settings/product/ProductGroup",
            "path": "/views/settings/product/ProductGroup.vue",
            "priority": 2204,
            "subordinate": 1,
            "children": []
          },
          {
            "id": "1840517453185093",
            "label": "货品子类别",
            "icon": "",
            "url": "/settings/product/ProductSubGroup",
            "path": "/views/settings/product/ProductSubGroup.vue",
            "priority": 2205,
            "subordinate": 1,
            "children": []
          },
          {
            "id": "1840517811650629",
            "label": "货品CLASS",
            "icon": "",
            "url": "/settings/product/ProductClass",
            "path": "/views/settings/product/ProductClass.vue",
            "priority": 2206,
            "subordinate": 1,
            "children": []
          },
          {
            "id": "1909885541630021",
            "label": "货品单位",
            "icon": "",
            "url": "/settings/product/ItemUnit",
            "path": "/views/settings/product/ItemUnit.vue",
            "priority": 2207,
            "subordinate": 1,
            "children": []
          }
        ]
      },
      {
        "id": "1924236534530117",
        "label": "库存点",
        "icon": "",
        "url": "",
        "path": "",
        "priority": 2301,
        "subordinate": 1,
        "children": [
          {
            "id": "1924239906111557",
            "label": "库存点浏览",
            "icon": "",
            "url": "/settings/stock/InventoryPoints",
            "path": "/views/settings/stock/InventoryPoints.vue",
            "priority": 2302,
            "subordinate": 2,
            "children": []
          },
          {
            "id": "1904377995542597",
            "label": "库存点组别",
            "icon": "",
            "url": "/settings/stock/InventoryPointsGroup",
            "path": "/views/settings/stock/InventoryPointsGroup.vue",
            "priority": 2303,
            "subordinate": 1,
            "children": []
          }
        ]
      },
      {
        "id": "1924224979140677",
        "label": "供应商",
        "icon": "",
        "url": "",
        "path": "",
        "priority": 2401,
        "subordinate": 1,
        "children": [
          {
            "id": "1924227064676421",
            "label": "供应商浏览",
            "icon": "",
            "url": "/settings/suppliers/Supplier",
            "path": "/views/settings/suppliers/Supplier.vue",
            "priority": 2402,
            "subordinate": 2,
            "children": []
          },
          {
            "id": "1909885019635781",
            "label": "供应商组别",
            "icon": "",
            "url": "/settings/suppliers/SupplierGroup",
            "path": "/views/settings/suppliers/SupplierGroup.vue",
            "priority": 2403,
            "subordinate": 1,
            "children": []
          }
        ]
      }
    ]
  },
  {
    "id": "1951059982811205",
    "label": "Spider",
    "icon": "menu_spider",
    "url": "",
    "path": "",
    "priority": 3001,
    "subordinate": 0,
    "children": [
      {
        "id": "1937920529645637",
        "label": "Jackroad",
        "icon": "",
        "url": "/Spider/Jackroad",
        "path": "/views/Spider/Jackroad.vue",
        "priority": 3002,
        "subordinate": 1,
        "children": []
      }
    ]
  },
  {
    "id": "1840513188249669",
    "label": "开发工具",
    "icon": "menu_develop",
    "url": "",
    "path": "",
    "priority": 4001,
    "subordinate": 0,
    "children": [
      {
        "id": "1840520724086853",
        "label": "功能项组别",
        "icon": "",
        "url": "/developmentTool/FunctionGroup",
        "path": "/views/developmentTool/FunctionGroup.vue",
        "priority": 4002,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1840521285238853",
        "label": "功能项",
        "icon": "",
        "url": "/developmentTool/Function",
        "path": "/views/developmentTool/Function.vue",
        "priority": 4003,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1840521856434245",
        "label": "功能列表",
        "icon": "",
        "url": "/developmentTool/FunctionList",
        "path": "/views/developmentTool/FunctionList.vue",
        "priority": 4004,
        "subordinate": 1,
        "children": []
      },
      {
        "id": "1840522262134853",
        "label": "导航栏",
        "icon": "",
        "url": "/developmentTool/Bar",
        "path": "/views/developmentTool/Bar.vue",
        "priority": 4005,
        "subordinate": 1,
        "children": []
      }
    ]
  },
  {
    "id": "1840513589493829",
    "label": "权限",
    "icon": "menu_permission",
    "url": "",
    "path": "",
    "priority": 5001,
    "subordinate": 0,
    "children": [
      {
        "id": "1840523187093573",
        "label": "权限管理",
        "icon": "",
        "url": "/permission/PermissionManage",
        "path": "/views/permission/PermissionManage.vue",
        "priority": 5002,
        "subordinate": 1,
        "children": []
      }
    ]
  },
  {
    "id": "1840513921417285",
    "label": "测试",
    "icon": "menu_user",
    "url": "",
    "path": "",
    "priority": 6001,
    "subordinate": 0,
    "children": [
      {
        "id": "1840523525832773",
        "label": "测试",
        "icon": "",
        "url": "/test/Test",
        "path": "/views/test/Test.vue",
        "priority": 6002,
        "subordinate": 1,
        "children": []
      }
    ]
  }
]

在APP.vue页面中(根据你的菜单在哪个位置就去哪个页面)

<el-menu :default-active="activeIndex" class="flex-container"
       mode="horizontal" 
       @open="handleOpen"
       @close="handleClose"
        background-color="#ccc"
         text-color="#fff" 
         active-text-color="#ccc" 
         router>
        <template v-for="(el,index) in menuList">
          <!-- 一级标题无子菜单 -->
          <el-menu-item v-if="el.children==[]" :index="index" :key="el.id">
          
            <span >{{el.label}}</span>
          </el-menu-item>
          <!-- 一级标题有子菜单 -->
            <template  v-else :index="index" >
              <span>{{el.label}}</span>
            </template>
            <!-- 二级标题 -->
            <el-menu-item :index="children.path" v-for="children in el.children" :key="children.id">
             
              {{children.label}}
            </el-menu-item>
        </template>
      </el-menu>

const activeIndex = ref('2');

const menuList=ref([]); //定义一个数组

const tree = JSON.parse(sessionStorage.getItem('MenuTree'));//获取存到浏览器的菜单数据
menuList.value=tree //把用户返回的树形菜单给menuList

3.接下来是动态路由的配置

// const tree = JSON.parse(sessionStorage.getItem('MenuTree'));
// const treeArray = Array.isArray(tree) ? tree : (tree ? [tree] : []);

// const pathq = ref([
//   {
//     path: '',
//     name: '',
//     meta: {
//       requiresAuth: true,
//     },
//   }
// ]);

// treeArray.forEach(m => {
//   m.children.forEach(c => {
//     pathq.value.push({
//       path: c.path,
//       name: c.path,
//       component: () => import(`${c.path}`), // 修改这里的路径
//       meta: {
//         requiresAuth: true,
//       },
//     });         
//   });
// });
// console.log('pathq.value',toRaw(pathq.value));
// const router=createRouter({
//   history:createWebHistory(import.meta.env.BASE_URL),
//     routes:[
//       {
//       path:'/',
//       name: 'Login',
//       // 懒加载
//       component: () => import("@/views/ThreeView.vue"),
//       meta: {
//         requiresAuth:true
//       }
//     },
//     ...toRaw(pathq.value)
//     ]

// })
// console.log(router.options.routes);

// if (pathq.value.length > 0) {
//   // 数组不为空，包含值 
//   console.log('pathq.value 不为空');
// } else {
//   // 数组为空，没有值
//   console.log('pathq.value 为空');
// }

我这里是动态跟静态都有写，如果只有动态可以进行对应的修改

注意，你遍历的路由页面必需都有，否则会解析错误

猫猫.net

关注

24
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
1
评论
VUE3+el 实现动态菜单页面跳转

在APP.vue页面中(根据你的菜单在哪个位置就去哪个页面)我这里是动态跟静态都有写，如果只有动态可以进行对应的修改。注意，你遍历的路由页面必需都有，否则会解析错误。3.接下来是动态路由的配置。
复制链接

扫一扫