vue实现后台管理系统侧边栏递归实现

EnZong
485 阅读8分钟

1.后台传递的数据

        id: 7,
        pid: 0,
        menu_name: '主页',
        menu_path: '\/admin\/home\/',
        unique_auth: 'admin-index-index',
        sort: 127,
        type: 0,
        html: '|-----',
      },
      {
        id: 1,
        pid: 0,
        menu_name: '商品',
        menu_path: '\/admin\/product',
        unique_auth: 'admin-product',
        sort: 126,
        type: 1,
        html: '|-----',
      },
      {
        id: 2,
        pid: 1,
        menu_name: '商品管理',
        menu_path: '\/admin\/product\/product_list',
        unique_auth: 'admin-store-storeProuduct-index',
        sort: 1,
        type: 0,
        html: '|-----|-----',
      },
      {
        id: 3,
        pid: 1,
        menu_name: '商品分类',
        menu_path: '\/admin\/product\/product_classify',
        unique_auth: 'admin-store-storeCategory-index',
        sort: 1,
        type: 0,
        html: '|-----|-----',
      },
      {
        id: 6,
        pid: 1,
        menu_name: '商品评论',
        menu_path: '\/admin\/product\/product_reply',
        unique_auth: 'product-product-reply',
        sort: 0,
        type: 0,
        html: '|-----|-----',
      },
      {
        id: 99,
        pid: 1,
        menu_name: '商品规格',
        menu_path: '\/admin\/product\/product_attr',
        unique_auth: 'product-product-attr',
        sort: 0,
        type: 0,
        html: '|-----|-----',
      },
      {
        id: 4,
        pid: 0,
        menu_name: '订单',
        menu_path: '\/admin\/order',
        unique_auth: 'admin-order',
        sort: 1,
        type: 1,
        html: '|-----',
      },
      {
        id: 5,
        pid: 4,
        menu_name: '订单管理',
        menu_path: '\/admin\/order\/list',
        unique_auth: 'admin-order-storeOrder-index',
        sort: 1,
        type: 0,
        html: '|-----|-----',
      },
      {
        id: 9,
        pid: 0,
        menu_name: '用户',
        menu_path: '\/admin\/user',
        unique_auth: 'admin-user',
        sort: 1,
        type: 1,
        html: '|-----',
      },
      {
        id: 10,
        pid: 9,
        menu_name: '用户管理',
        menu_path: '\/admin\/user\/list',
        unique_auth: 'admin-user-user-index',
        sort: 1,
        type: 0,
        html: '|-----|-----',
      },
      {
        id: 11,
        pid: 9,
        menu_name: '会员等级',
        menu_path: '\/admin\/user\/level',
        unique_auth: 'user-user-level',
        sort: 1,
        type: 0,
        html: '|-----|-----',
      },
      {
        id: 227,
        pid: 9,
        menu_name: '用户分组',
        menu_path: '\/admin\/user\/group',
        unique_auth: 'user-user-group',
        sort: 1,
        type: 0,
        html: '|-----|-----',
      },
      {
        id: 589,
        pid: 9,
        menu_name: '用户标签',
        menu_path: '\/admin\/user\/label',
        unique_auth: 'user-user-label',
        sort: 1,
        type: 0,
        html: '|-----|-----',
      },
      {
        id: 26,
        pid: 0,
        menu_name: '分销',
        menu_path: '\/admin\/agent',
        unique_auth: 'admin-agent',
        sort: 1,
        type: 1,
        html: '|-----',
      },
      {
        id: 28,
        pid: 26,
        menu_name: '分销设置',
        menu_path: '\/admin\/setting\/system_config_retail\/3\/9',
        unique_auth: 'setting-system-config',
        sort: 1,
        type: 0,
        html: '|-----|-----',
      },
      {
        id: 29,
        pid: 26,
        menu_name: '分销员管理',
        menu_path: '\/admin\/agent\/agent_manage\/index',
        unique_auth: 'agent-agent-manage',
        sort: 1,
        type: 0,
        html: '|-----|-----',
      },
      {
        id: 27,
        pid: 0,
        menu_name: '营销',
        menu_path: '\/admin\/marketing',
        unique_auth: 'admin-marketing',
        sort: 1,
        type: 1,
        html: '|-----',
      },
      {
        id: 30,
        pid: 27,
        menu_name: '优惠券',
        menu_path: '\/admin\/marketing\/store_coupon',
        unique_auth: 'marketing-store_coupon-index',
        sort: 1,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 70,
        pid: 30,
        menu_name: '优惠券模板',
        menu_path: '\/admin\/marketing\/store_coupon\/index',
        unique_auth: 'marketing-store_coupon',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 71,
        pid: 30,
        menu_name: '优惠券列表',
        menu_path: '\/admin\/marketing\/store_coupon_issue\/index',
        unique_auth: 'marketing-store_coupon_issue',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 72,
        pid: 30,
        menu_name: '用户领取记录',
        menu_path: '\/admin\/marketing\/store_coupon_user\/index',
        unique_auth: 'marketing-store_coupon_user',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 31,
        pid: 27,
        menu_name: '砍价管理',
        menu_path: '\/admin\/marketing\/store_bargain',
        unique_auth: 'marketing-store_bargain-index',
        sort: 1,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 74,
        pid: 31,
        menu_name: '砍价商品',
        menu_path: '\/admin\/marketing\/store_bargain\/index',
        unique_auth: 'marketing-store_bargain',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 32,
        pid: 27,
        menu_name: '拼团管理',
        menu_path: '\/admin\/marketing\/store_combination',
        unique_auth: 'marketing-store_combination-index',
        sort: 1,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 75,
        pid: 32,
        menu_name: '拼团商品',
        menu_path: '\/admin\/marketing\/store_combination\/index',
        unique_auth: 'marketing-store_combination',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 76,
        pid: 32,
        menu_name: '拼团列表',
        menu_path: '\/admin\/marketing\/store_combination\/combina_list',
        unique_auth: 'marketing-store_combination-combina_list',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 33,
        pid: 27,
        menu_name: '秒杀管理',
        menu_path: '\/admin\/marketing\/store_seckill',
        unique_auth: 'marketing-store_seckill-index',
        sort: 1,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 77,
        pid: 33,
        menu_name: '秒杀商品',
        menu_path: '\/admin\/marketing\/store_seckill\/index',
        unique_auth: 'marketing-store_seckill',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 78,
        pid: 33,
        menu_name: '秒杀配置',
        menu_path: '\/admin\/marketing\/store_seckill_data\/index\/49',
        unique_auth: 'marketing-store_seckill-data',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 34,
        pid: 27,
        menu_name: '积分',
        menu_path: '\/admin\/marketing\/user_point',
        unique_auth: 'marketing-user_point-index',
        sort: 1,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 79,
        pid: 34,
        menu_name: '积分配置',
        menu_path: '\/admin\/marketing\/integral\/system_config',
        unique_auth: 'marketing-integral-system_config',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 80,
        pid: 34,
        menu_name: '积分日志',
        menu_path: '\/admin\/marketing\/user_point\/index',
        unique_auth: 'marketing-user_point',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 686,
        pid: 27,
        menu_name: '直播管理',
        menu_path: '\/admin\/marketing\/live',
        unique_auth: 'admin-marketing-live',
        sort: 0,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 687,
        pid: 686,
        menu_name: '直播间管理',
        menu_path: '\/admin\/marketing\/live\/live_room',
        unique_auth: 'admin-marketing-live-live_room',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 688,
        pid: 686,
        menu_name: '直播商品管理',
        menu_path: '\/admin\/marketing\/live\/live_goods',
        unique_auth: 'admin-marketing-live-live_goods',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 689,
        pid: 686,
        menu_name: '主播管理',
        menu_path: '\/admin\/marketing\/live\/anchor',
        unique_auth: 'admin-marketing-live-anchor',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 35,
        pid: 0,
        menu_name: '财务',
        menu_path: '\/admin\/finance',
        unique_auth: 'admin-finance',
        sort: 1,
        type: 1,
        html: '|-----',
      },
      {
        id: 36,
        pid: 35,
        menu_name: '财务操作',
        menu_path: '\/admin\/finance\/user_extract',
        unique_auth: 'finance-user_extract-index',
        sort: 1,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 39,
        pid: 36,
        menu_name: '提现申请',
        menu_path: '\/admin\/finance\/user_extract\/index',
        unique_auth: 'finance-user_extract',
        sort: 1,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 37,
        pid: 35,
        menu_name: '财务记录',
        menu_path: '\/admin\/finance\/user_recharge',
        unique_auth: 'finance-user-recharge-index',
        sort: 1,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 40,
        pid: 37,
        menu_name: '充值记录',
        menu_path: '\/admin\/finance\/user_recharge\/index',
        unique_auth: 'finance-user-recharge',
        sort: 1,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 41,
        pid: 37,
        menu_name: '资金记录',
        menu_path: '\/admin\/finance\/finance\/bill',
        unique_auth: 'finance-finance-bill',
        sort: 1,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 38,
        pid: 35,
        menu_name: '佣金记录',
        menu_path: '\/admin\/finance\/finance',
        unique_auth: 'finance-finance-index',
        sort: 1,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 42,
        pid: 38,
        menu_name: '佣金记录',
        menu_path: '\/admin\/finance\/finance\/commission',
        unique_auth: 'finance-finance-commission',
        sort: 1,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 43,
        pid: 0,
        menu_name: '内容',
        menu_path: '\/admin\/cms',
        unique_auth: 'admin-cms',
        sort: 1,
        type: 1,
        html: '|-----',
      },
      {
        id: 44,
        pid: 43,
        menu_name: '文章管理',
        menu_path: '\/admin\/cms\/article\/index',
        unique_auth: 'cms-article-index',
        sort: 1,
        type: 0,
        html: '|-----|-----',
      },
      {
        id: 45,
        pid: 43,
        menu_name: '文章分类',
        menu_path: '\/admin\/cms\/article_category\/index',
        unique_auth: 'cms-article-category',
        sort: 1,
        type: 0,
        html: '|-----|-----',
      },
      {
        id: 12,
        pid: 0,
        menu_name: '设置',
        menu_path: '\/admin\/setting',
        unique_auth: 'admin-setting',
        sort: 0,
        type: 1,
        html: '|-----',
      },
      {
        id: 23,
        pid: 12,
        menu_name: '系统设置',
        menu_path: '\/admin\/setting\/system_config',
        unique_auth: 'setting-system-config',
        sort: 10,
        type: 0,
        html: '|-----|-----',
      },
      {
        id: 165,
        pid: 12,
        menu_name: '客服管理',
        menu_path: '\/admin\/setting\/store_service\/index',
        unique_auth: 'setting-store-service',
        sort: 2,
        type: 0,
        html: '|-----|-----',
      },
      {
        id: 14,
        pid: 12,
        menu_name: '管理权限',
        menu_path: '\/admin\/setting\/auth\/list',
        unique_auth: 'setting-system-admin',
        sort: 1,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 19,
        pid: 14,
        menu_name: '身份管理',
        menu_path: '\/admin\/setting\/system_role\/index',
        unique_auth: 'setting-system-role',
        sort: 1,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 20,
        pid: 14,
        menu_name: '管理员列表',
        menu_path: '\/admin\/setting\/system_admin\/index',
        unique_auth: 'setting-system-list',
        sort: 1,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 21,
        pid: 14,
        menu_name: '权限规则',
        menu_path: '\/admin\/setting\/system_menus\/index',
        unique_auth: 'setting-system-menus',
        sort: 1,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 656,
        pid: 12,
        menu_name: '页面管理',
        menu_path: '\/admin\/setting\/pages',
        unique_auth: 'admin-setting-pages',
        sort: 1,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 657,
        pid: 656,
        menu_name: '页面设计',
        menu_path: '\/admin\/setting\/pages\/devise',
        unique_auth: 'admin-setting-pages-devise',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 660,
        pid: 656,
        menu_name: '页面链接',
        menu_path: '\/admin\/setting\/pages\/links',
        unique_auth: 'admin-setting-pages-links',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 94,
        pid: 12,
        menu_name: '短信设置',
        menu_path: '\/admin\/setting\/sms',
        unique_auth: 'setting-sms',
        sort: 0,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 95,
        pid: 94,
        menu_name: '短信账户',
        menu_path: '\/admin\/setting\/sms\/sms_config\/index',
        unique_auth: 'setting-sms-sms-config',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 96,
        pid: 94,
        menu_name: '短信模板',
        menu_path: '\/admin\/setting\/sms\/sms_template_apply\/index',
        unique_auth: 'setting-sms-config-template',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 97,
        pid: 94,
        menu_name: '短信购买',
        menu_path: '\/admin\/setting\/sms\/sms_pay\/index',
        unique_auth: 'setting-sms-sms-template',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 588,
        pid: 94,
        menu_name: '短信开关',
        menu_path: '\/admin\/setting\/system_config_message\/3\/20',
        unique_auth: 'setting-system-config-message',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 128,
        pid: 12,
        menu_name: '数据配置',
        menu_path: '\/admin\/setting\/system_group_data',
        unique_auth: 'setting-system-group_data',
        sort: 0,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 154,
        pid: 128,
        menu_name: '签到天数配置',
        menu_path: '\/admin\/setting\/system_group_data\/sign\/55',
        unique_auth: 'setting-system-group_data-sign',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 155,
        pid: 128,
        menu_name: '订单详情动态图',
        menu_path: '\/admin\/setting\/system_group_data\/order\/53',
        unique_auth: 'setting-system-group_data-order',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 156,
        pid: 128,
        menu_name: '个人中心菜单',
        menu_path: '\/admin\/setting\/system_group_data\/user\/54',
        unique_auth: 'setting-system-group_data-user',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 158,
        pid: 128,
        menu_name: '热门榜单推荐',
        menu_path: '\/admin\/setting\/system_group_data\/hot\/57',
        unique_auth: 'setting-system-group_data-hot',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 159,
        pid: 128,
        menu_name: '首发新品推荐',
        menu_path: '\/admin\/setting\/system_group_data\/new_product\/58',
        unique_auth: 'setting-system-group_data-new_product',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 160,
        pid: 128,
        menu_name: '促销单品推荐',
        menu_path: '\/admin\/setting\/system_group_data\/promotion\/59',
        unique_auth: 'setting-system-group_data-promotion',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 161,
        pid: 128,
        menu_name: '个人中心分销海报',
        menu_path: '\/admin\/setting\/system_group_data\/poster\/60',
        unique_auth: 'setting-system-group_data-poster',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 162,
        pid: 128,
        menu_name: '精品推荐',
        menu_path: '\/admin\/setting\/system_group_data\/best\/52',
        unique_auth: 'setting-system-group_data-best',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 144,
        pid: 12,
        menu_name: '提货点设置',
        menu_path: '\/admin\/setting\/merchant\/system_store\/index',
        unique_auth: 'setting-system-config-merchant',
        sort: 0,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 300,
        pid: 144,
        menu_name: '提货点',
        menu_path: '\/admin\/setting\/merchant\/system_store\/list',
        unique_auth: 'setting-merchant-system-store',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 301,
        pid: 144,
        menu_name: '核销员',
        menu_path: '\/admin\/setting\/merchant\/system_store_staff\/index',
        unique_auth: 'setting-merchant-system-store-staff',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 302,
        pid: 144,
        menu_name: '核销订单',
        menu_path: '\/admin\/setting\/merchant\/system_verify_order\/index',
        unique_auth: 'setting-merchant-system-verify-order',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 303,
        pid: 12,
        menu_name: '物流设置',
        menu_path: '\/admin\/setting\/freight',
        unique_auth: '',
        sort: 0,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 229,
        pid: 303,
        menu_name: '城市数据',
        menu_path: '\/admin\/setting\/freight\/city\/list',
        unique_auth: 'setting-system-city',
        sort: 1,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 145,
        pid: 303,
        menu_name: '物流公司',
        menu_path: '\/admin\/setting\/freight\/express\/index',
        unique_auth: 'setting-freight-express',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 230,
        pid: 303,
        menu_name: '运费模板',
        menu_path: '\/admin\/setting\/freight\/shipping_templates\/list',
        unique_auth: 'setting-shipping-templates',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 304,
        pid: 303,
        menu_name: '物流配置',
        menu_path: '\/admin\/setting\/system_config_logistics\/3\/10',
        unique_auth: 'setting-system-config-logistics',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 135,
        pid: 0,
        menu_name: '应用',
        menu_path: '\/admin\/app',
        unique_auth: 'admin-app',
        sort: 0,
        type: 1,
        html: '|-----',
      },
      {
        id: 69,
        pid: 135,
        menu_name: '公众号',
        menu_path: '\/admin\/app\/wechat',
        unique_auth: 'admin-wechat',
        sort: 0,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 92,
        pid: 69,
        menu_name: '微信菜单',
        menu_path: '\/admin\/app\/wechat\/setting\/menus\/index',
        unique_auth: 'application-wechat-menus',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 93,
        pid: 69,
        menu_name: '微信模板消息',
        menu_path: '\/admin\/app\/wechat\/setting\/template\/index',
        unique_auth: 'application-wechat-template',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 109,
        pid: 69,
        menu_name: '图文管理',
        menu_path: '\/admin\/app\/wechat\/news_category\/index',
        unique_auth: 'wechat-wechat-news-category-index',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 114,
        pid: 69,
        menu_name: '自动回复',
        menu_path: '\/admin\/app\/wechat\/reply',
        unique_auth: 'wechat-wechat-reply-index',
        sort: 0,
        type: 1,
        html: '|-----|-----|-----',
      },
      {
        id: 113,
        pid: 114,
        menu_name: '微信关注回复',
        menu_path: '\/admin\/app\/wechat\/reply\/follow\/subscribe',
        unique_auth: 'wechat-wechat-reply-subscribe',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----|-----',
      },
      {
        id: 115,
        pid: 114,
        menu_name: '关键字回复',
        menu_path: '\/admin\/app\/wechat\/reply\/keyword',
        unique_auth: 'wechat-wechat-reply-keyword',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----|-----',
      },
      {
        id: 116,
        pid: 114,
        menu_name: '无效关键词回复',
        menu_path: '\/admin\/app\/wechat\/reply\/index\/default',
        unique_auth: 'wechat-wechat-reply-default',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----|-----',
      },
      {
        id: 132,
        pid: 135,
        menu_name: '小程序',
        menu_path: '\/admin\/app\/routine',
        unique_auth: 'admin-routine',
        sort: 0,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 133,
        pid: 132,
        menu_name: '小程序订阅消息',
        menu_path: '\/admin\/app\/routine\/routine_template\/index',
        unique_auth: 'routine-routine_template',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 25,
        pid: 0,
        menu_name: '维护',
        menu_path: '\/admin\/system',
        unique_auth: 'admin-system',
        sort: -1,
        type: 1,
        html: '|-----',
      },
      {
        id: 56,
        pid: 25,
        menu_name: '开发配置',
        menu_path: '\/admin\/system\/config',
        unique_auth: 'system-config-index',
        sort: 1,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 111,
        pid: 56,
        menu_name: '配置分类',
        menu_path: '\/admin\/system\/config\/system_config_tab\/index',
        unique_auth: 'system-config-system_config-tab',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 112,
        pid: 56,
        menu_name: '组合数据',
        menu_path: '\/admin\/system\/config\/system_group\/index',
        unique_auth: 'system-config-system_config-group',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 65,
        pid: 25,
        menu_name: '安全维护',
        menu_path: '\/admin\/system\/maintain',
        unique_auth: 'system-maintain-index',
        sort: 0,
        type: 1,
        html: '|-----|-----',
      },
      {
        id: 57,
        pid: 65,
        menu_name: '刷新缓存',
        menu_path: '\/admin\/system\/maintain\/clear\/index',
        unique_auth: 'system-clear',
        sort: 1,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 47,
        pid: 65,
        menu_name: '系统日志',
        menu_path: '\/admin\/system\/maintain\/system_log\/index',
        unique_auth: 'system-maintain-system-log',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 64,
        pid: 65,
        menu_name: '文件校验',
        menu_path: '\/admin\/system\/maintain\/system_file\/index',
        unique_auth: 'system-maintain-system-file',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 66,
        pid: 65,
        menu_name: '清除数据',
        menu_path: '\/admin\/system\/maintain\/system_cleardata\/index',
        unique_auth: 'system-maintain-system-cleardata',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 67,
        pid: 65,
        menu_name: '数据备份',
        menu_path: '\/admin\/system\/maintain\/system_databackup\/index',
        unique_auth: 'system-maintain-system-databackup',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
      {
        id: 605,
        pid: 65,
        menu_name: '商业授权',
        menu_path: '\/admin\/system\/maintain\/auth',
        unique_auth: 'system-maintain-auth',
        sort: 0,
        type: 0,
        html: '|-----|-----|-----',
      },
    ]

2.递归代码实现

      var out = []
      for (var item of arr) {
        // console.log('循环项',item)
        // 如果pid 和父id相同证明当前的item是上一个children里面的那个
        if (item.pid == parent) {
        //自己调用自己
          var children = getNestedChildren(arr, item.id)
          item.children = children
          out.push(item)
        }
      }
      return out
    }
    var newRouter = getNestedChildren(menuList, 0)
    console.log(newRouter)

3.递归实现数据的深拷贝


      function deepCopy(objects){
        let newarr = Array.isArray(objects) ? [] : {}
        if(Array.isArray(objects))
        {
            for(let item of objects){
              if(typeof item != 'object'){
                newarr.push(item)
              }
              else
              {
                newarr.push(deepCopy(item))
              }
            }
        }
        else if(
          Object.prototype.toString.call(objects) == '[object Object]'
        ){
          for(let key in objects){
            if(typeof objects[key] != 'object')
            {
                newarr[key] = objects[key]
            }
            else{
              newarr[key] = deepCopy(objects[key])
            }
          }
        }
         return newarr
      }

      var copyobj = deepCopy(parserinfo)
      console.log(copyobj)
      copyobj[3][1] = 20
      console.log(copyobj,parserinfo)

总结

1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用

2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”

为什么要使用深拷贝？

我们希望在改变新的数组（对象）的时候，不改变原数组（对象）

avatar
文章
阅读
粉丝