请问我该怎么把后台返回的action也一起加入前台定义的路由里呢

曾不错吖

已于 2022-08-16 20:28:13 修改

阅读量145

点赞数

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

于 2022-08-16 16:40:51 首次发布

本文链接：https://blog.csdn.net/sisuiban/article/details/126369395

版权

前端路由动态生成路由配置权限管理递归函数

关键词由CSDN通过智能技术生成

笔记部分专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 基础的路由  生成的正确路由塞进这个里面
    const DynamicRoutes = [
    {
        path:"",
        name:'container',
        redirect:"home",
        meta:{
            requiresAuth:true,
            name:"首页"
        },
        children:[
            {
                path:"home",
                name:"home",
                meta:{
                    // 匹配规则
                    name:"首页",
                    icon:"icon-name"
                }
            }
        ]
    },
    {
        path:"/403",
    },
    {
        path:"*",
    }
]
    // 自定义的路由表
    let obj = [
    {
        path: '/order',
        name: 'order-manage',
        meta: {
            name: '订单管理',
            icon: 'icon-email'
        },
        children: [
            {
                path: 'list',
                name: 'order-list',
                meta: {
                    name: '订单列表',
                    icon: 'icon-quit'
                }
            },
            {
                path: 'product',
                name: 'product-manage',
                meta: {
                    name: '生产管理',
                    icon: 'icon-service'
                },
                children: [
                    {
                        path: 'list',
                        name: 'product-list',
                        meta: {
                            name: '生产列表',
                            icon: 'icon-nav'
                        }
                    },
                    {
                        path: 'review',
                        name: 'review-manage',
                        meta: {
                            name: '审核管理',
                            icon: 'icon-finance-manage'
                        }
                    }
                ]
            },
            {
                path: 'returnGoods',
                name: 'return-goods',
                meta: {
                    name: '退货管理',
                    icon: 'icon-product-manage'
                }
            }
        ]
    },
    {
        path: '/goods',
        name: 'goods',
        meta: {
            name: '产品管理',
            icon: 'icon-order-manage'
        },
        children: [
            {
                path: 'list',
                name: 'goods-list',
                meta: {
                    name: '产品列表',
                    icon: 'icon-home'
                }
            },
            {
                path: 'classify',
                name: 'goods-classify',
                meta: {
                    name: '产品分类',
                    icon: 'icon-product-manage'
                }
            }
        ]
    }
]

    // 后台生成的正确路由    action这个是每个页面拥有的功能，没有就默认为空字符串
    let new_obj = [
      {
        name: "订单管理",
        
        children: [
          {
            name: "订单列表",
            action: 'add,edit'
          },
          {
            name: "生产管理",
            children: [
              {
                name: "生产列表",
                action: 'add,edit,del'
              }
            ]
          },
          {
            name: "退货管理",
            action: 'add,del'

          }
        ]
      },
      {
        name: "产品管理",
        children: [
          {
            name: "产品列表"
          },
          {
            name: "产品分类"
          }
        ]
      }
    ]
      //   userRouter 后端返回的路由组   allRouter  前端生成的路由
    function recursionRouter(userRouter = [], allRouter = []) {
      var realRoutes = [];
      allRouter.forEach((v, i) => {
       userRouter.forEach((item, index) => {
         if (item.name === v.meta.name) {
         	v.meta.action = item.action?item.action:''
           if (item.children && item.children.length > 0) {
             v.children = recursionRouter(item.children, v.children);
           }
           realRoutes.push(v)
         }
       })
     })
     return realRoutes;
   }
    
   let newList = recursionRouter(new_obj,obj)
   let MainContainer = DynamicRoutes.find(v => v.path === "");

   let children = MainContainer.children;

   children.push(...newList)
    
   console.log('根据后台返回的组成新的数组',DynamicRoutes)


  </script>
</body>

</html>