js面包屑封装

前言

下面是拆解的代码
因为封装后不易于阅读
可以自己组合封装

const arr = [
    //看板列表
    {
      path: "/kanban",
      title: "看板",
    },
    // 项目列表
    {
      path: "/projects",
      title: "项目",
      children: [
        {
          path: "/projects/list",
          title: "项目列表",
        },
        {
          path: "/projects/only",
          title: "项目详情",
          children: [
            {
              path: "/projects/only/list",
              title: "项目列表",
            },
            {
              path: "/projects/only/only",
              title: "项目详情",
            },
          ]
        },
      ]
    },
  ];
	
  //上面的路由配置表拍平
  function fn(arr) {
    return arr.reduce((pre, cur) => {
      //要用到上一次的，积累下的数组
      if (cur.children) {
        return pre.concat({ ...cur }, fn(cur.children));
      }
      return pre.concat(cur);
    }, [])
  }
  console.log(fn(arr));
  const routerArr = fn(arr);

  //假设地址栏，获取到的地址
  const str = "/projects/only/list";
  const strArr = str.split('/').slice(1);
  console.log(strArr);
  let a = strArr.reduce((pre,cur,index)=>{
    console.log(index);
    if (index > 0) {
      return pre.concat( pre[index-1] + '/' + cur);
    }
    return pre.concat('/'+ cur);
  },[]);
  console.log(a);
  
  //最后得出的结果
  let end= routerArr.reduce((pre,cur,index)=>{
      return pre.concat(cur.path===a[pre.length]?cur:[]);
  },[]);  
  console.log(end);

组装后的代码

封装的比较死啊，不灵活，不过感觉还行

//拍平 路由配置表
export function flatRoutes(arr:any[]):any[]{
  return arr.reduce((pre, cur) => {
    //要用到上一次的，积累下的数组
    if (cur.children) {
      return pre.concat({ ...cur }, flatRoutes(cur.children));
    }
    return pre.concat(cur);
  }, [])
}

//解析useLocaltion获取的路径
export function urlParse(url:string):string[]{
  return url.split('/').slice(1).reduce((pre, cur, index) => {
    if (index > 0) {
      return pre.concat(pre[index - 1] + '/' + cur);
    }
    return pre.concat('/' + cur);
  }, [] as string[] ) as string[];
}

//最后渲染的 数组
export function endFn(routeArr:any[],urlArr:string[]):string[]{
  return routeArr.reduce((pre, cur, index) => {
    return pre.concat(cur.path === urlArr[pre.length] ? cur : []);
  }, []);
}

//组装 一下，
/**
 * 
 * @param arr 路由配置表
 * @param url 获取的地址栏路径
 * @returns 
 */
export function breadFn(arr:any[],url:string){
  return endFn(flatRoutes(arr),urlParse(url));
}

另一种

通过监听点击菜单栏的，点击事件获取到，点击后的数组形式的路径
可以那那个数组来匹配

如果要实现刷新数据仍然保留，存入sesiontorage