当前位置: 代码迷 >> 综合 >> Iview之动态菜单
  详细解决方案

Iview之动态菜单

热度:42   发布时间:2024-02-23 10:42:38.0

name可以自己命名,但要唯一,我这里做了面包屑跳转,所以采取的下面的命名方式。

<template><div><Sider ref="side1" hide-trigger collapsible :collapsed-width="78"><Menu ref="asideMenu" theme="dark" width="auto"accordion><div v-for="(subItem) in menuList"><Submenu v-bind:name="subItem.name"><template slot="title"><Icon v-bind:type="subItem.icon"/>{
   {subItem.title}}</template><div v-for="(item) in subItem.children"><MenuItem v-bind:name="item.name">{
   {item.title}}</MenuItem></div></Submenu></div></Menu></Sider></div>
</template><script>export default {name: "fare",data() {return {menuList: [{name: "首页",title: "首页",icon: "ios-home",children: [{name: "首页+/home",title: "首页",path: "/home",}]}, {name: "用户管理",title: "用户管理",icon: "ios-people",children: [{name: "用户管理|客户管理+/customer",title: "客户管理",path: "/customer",}, {name: "用户管理|合作企业管理+/cooperativeCompanies",title: "合作企业管理",path: "/cooperativeCompanies",}, {name: "用户管理|系统用户管理+/admin",title: "系统用户管理",path: "/admin",}]}, {name: "运输管理",title: "运输管理",icon: "ios-subway",children: [{name: "运输管理|车辆管理+/car",title: "车辆管理",path: "/car",}, {name: "运输管理|货运司机管理+/driver",title: "货运司机管理",path: "/driver",}, {name: "运输管理|仓储中心管理+/storageCenter",title: "仓储中心管理",path: "/storageCenter",}]}, {name: "路线管理",title: "路线管理",icon: "md-map",children: [{name: "路线管理|地区信息管理+/area",title: "地区信息管理",path: "/area",}, {name: "路线管理|路线信息管理+/path",title: "路线信息管理",path: "/path",}]}, {name: "订单管理",title: "订单管理",icon: "ios-paper",children: [{name: "订单管理|费率管理+/fare",title: "费率管理",path: "/fare",}, {name: "订单管理|发票管理+/receipt",title: "发票管理",path: "/receipt",}, {name: "订单管理|支付+/pay",title: "支付",path: "/pay",}]}, {name: "统计分析",title: "统计分析",icon: "ios-podium",children: [{name: "统计分析|物流信息分析+/logisticsAnalysis",title: "物流信息分析",path: "/logisticsAnalysis",}, {name: "统计分析|客户信息分析+/customerAnalysis",title: "客户信息分析",path: "/customerAnalysis",}]}, {name: "系统管理",title: "系统管理",icon: "md-settings",children: [{name: "系统管理|角色管理+/role",title: "角色管理",path: "/role",}]}]}}}
</script><style scoped></style>