补充 vue3用户管理权限（路由控制）

有人问我二级路由3级路由是如何添加的，我这里大概说一下吧，我们添加动态路由的时候，最好是在路由上添加meta内容，里面写入我们的该路由的父路由的name信息，（一级路由写就可以了），如下图

const routerlist = [
  {
    path: "/defa",
    name: "defa",
    component: () => import("@/views/DefaCat.vue"),
    meta:"home", //写入父路由的name信息。这里的意思就是把这个路由归置到home路由下边
    children: [
      {
        path: "/defa/fase1",
        name: "homelist1",
        component: () => import("@/views/UserZi.vue"),
        meta:"defa",
        children:[
          {
            path: "/defa/fase1/fase3",
            name: "homelist4",
            component: () => import("@/views/ComData.vue"),
            meta:"homelist1",
          }
        ]
      },
    ],
  },
  {
    path: "/defa/fase2",
    name: "homelist2",
    component: () => import("@/views/UserZi.vue"),
    meta:"home",
  },
];

我这里写了一个处理函数，假设后端返回给我们的是一个这个的路由权限数组["/defa","/defa/fase1","/defa/fase1/fase3"]  按照之前的逻辑是，这个数组会存放在vuex当中，我这里就是在路由前置守卫这里获取到vuex的里的路由表，然后在通过我下方的这个处理函数，将动态路由表里如果匹配不上后端返回路由表里的数据的话，会将内容给剔除掉。代码如下：

const filterRoutes = (targetPaths:any, sourceRoutes:any) => {
  return sourceRoutes.map((route:any) => {
    const filteredChildren = route.children
      ? filterRoutes(targetPaths, route.children) // 递归处理子路由
      : [];

    return {
      ...route,
      children: filteredChildren,
    };
  }).filter((route:any) => route.children.length > 0 || targetPaths.includes(route.path));
};

在调用，循环，依次传入addrouter里即可，处理函数filterrouter第一个接收的参数是后端传入的路由数组，第二个参数是我们的动态路由，我们不仅路由这里需要处理函数，在我们导航栏那里，也需要我们的处理函数将动态路由处理完后在进行递归渲染我们的导航栏

    filterRoutes(arrlist,routerlist).map((item: any) => {
        router.addRoute(item.meta,item); //这里的第一个参数是我们要添加路由的父路由，这个会把我们的路由归属到第一个参数的路由下面，第一个参数是父路由的name属性  
      
    });

第二种解析办法，稍微简单点

const filterRoutes=(router:any,role:any)=>{
  return router.filter((item:any)=>{
    return role.indexOf(item.path)!=-1;
  }).map((item:any)=>{
    if(item.children){
      item.children=filterRoutes(item.children,role)
    }
    return item
  })
}

也是利用了递归的方法，对一个数字进行数据筛选，这里给大家分段解释下。代码都是死的，主要是思路和想法，以想法来驱动代码。

const filterRoutes=(router:any,role:any)=>{  //1.接收一个路由数据和权限数组
  return router.filter((item:any)=>{  //2.这里首先对第一层的数据进行修改 这里使用了filter方法，这个犯法是判断回调函数里的return是否是true如果是true，则保留当前循环到的哪一个数组，如果不是则不保留
    return role.indexOf(item.path)!=-1;  //3.通过indexof来判断，路由表里的path是否在role里，如果在的话返会一个具体的下标，如果不在则返回-1，这里是当不等于-1时就将筛选的数据添加进去
  }).map((item:any)=>{  //4.这里把第一层的路由表筛选完后，这时候就要筛选第二层了
    if(item.children){ //5.这里判断是否有子路由
      item.children=filterRoutes(item.children,role) //6.这里使用递归，将子路由筛选过的数据给重新赋值给子路由。将子路由的数据表筛传入函数，然后在重新执行筛选子路由，然后在将清洗后子路由的数据给赋值给当前路由的itrm.childer选项
    }
    return item //6.然后将筛选过的数据继续循环调用
  })
}

拜拜